Dropdown
A dropdown component with multiple use cases, including having a list of buttons and/or radios. Can be divided into different sections with different dividers.
Button items
The dropdown can have button items - items that triggers an action.
Radio items
The dropdown can also have radio items - items that is used to change or set a specific state. Usually this is used to filter or sort content. The selected radio item will be marked with a tick/checkmark on the left side.
Right aligned
By default, the dropdown is left aligned, meaning it will be rendered with the left side parallell to the button. This can be changed to right align by setting the position-prop to 'right'.
Advanced
In special cases, you might want to utilize both button and radio items in the same dropdown. This is possible, but keep in mind that there are things to consider when it comes to Accessibility and Universal Design. See the Accessibility page.
Fixed width
By default, the dropdown width will increase with the content, meaning the items should have a reasonable long text. If you, however, wish to have a long text spread over multiple lines, you can set a fixed width by passing in a tailwind width unit to ´twWidth.