Dropdown
Dropdowns is a custom select component that allows users to make single or multiple selections.
An option that's been selected can represent a corresponding value in forms or be used to filter/sort content.
Based on Headless UI.

Anatomy
<Dropdown> <Dropdown.Trigger>...</Dropdown.Trigger> <Dropdown.Options> <Dropdown.Option>...</Dropdown.Option> </Dropdown.Options> <Dropdown.Hint>...</Dropdown.Hint> </Dropdown>
Default
Trigger elements
Example layouts for options
Anatomy
<Dropdown> <Dropdown.Select>...</Dropdown.Select> <Dropdown.Options> <Dropdown.Option>...</Dropdown.Option> </Dropdown.Options> <Dropdown.Hint>...</Dropdown.Hint> </Dropdown>
Select
Informative message holder
Informative message holder
Informative message holder
Different states for Select
Informative message holder
Informative message holder
Informative message holder
Anatomy
<Dropdown> <Dropdown.InsetSelect>...</Dropdown.InsetSelect> <Dropdown.Options> <Dropdown.Option>...</Dropdown.Option> </Dropdown.Options> <Dropdown.Hint>...</Dropdown.Hint> </Dropdown>
Select with inner label
Informative message holder
Different states for Select with inner label
Informative message holder
Informative message holder
Informative message holder
Anatomy
<Dropdown> <Dropdown.MultiSelect>...</Dropdown.MultiSelect> <Dropdown.Options> <Dropdown.Option>...</Dropdown.Option> </Dropdown.Options> <Dropdown.Hint>...</Dropdown.Hint> </Dropdown>
MultiSelect
Informative message holder
Informative message holder
Informative message holder
Anatomy
<Dropdown> <Dropdown.InsetMultiSelect>...</Dropdown.InsetMultiSelect> <Dropdown.Options> <Dropdown.Option>...</Dropdown.Option> </Dropdown.Options> <Dropdown.Hint>...</Dropdown.Hint> </Dropdown>
MultiSelect with inner label
Informative message holder
Dropdown
Name | Type | Required | Default | Description |
---|---|---|---|---|
value | T | Yes | - | The selected value. |
onChange | (value: T) => void | Yes | - | The function to call when a new option is selected. |
isError | boolean | No | - | Set valid/non-valid |
disabled | boolean | No | - | Set disabled/non-disabled |
size | sm | md | lg | xl | string | No | md | Size |
className | string | No | - | Tailwind classes for custom styles. |
position | top-start | top-end | bottom-start | bottom-end | right-start | right-end | left-start| left-end | top | bottom | right| left | No | bottom | Set placement for dropdown |
Render Props: | ||||
open | boolean | No | - | Whether or not the Listbox is open. |
multiple | boolean | No | - | Whether multiple options can be selected or not. |
Dropdown.Options
Name | Type | Required | Default | Description |
---|---|---|---|---|
menuWidth | string | No | - | Tailwind class for custom options container width. |
className | string | No | - | Tailwind classes for custom styles. |
Dropdown.Option
Name | Type | Required | Default | Description |
---|---|---|---|---|
value | T | No | - | The option value. |
Render Props: | ||||
active | boolean | No | - | Whether or not the option is the active/focused option. |
selected | boolean | No | - | Whether or not the option is the selected option. |
Dropdown.Select | Dropdown.InsetSelect
Name | Type | Required | Default | Description |
---|---|---|---|---|
label | JSX.Element | string | No | - | Label title |
placeholder | JSX.Element | string | No | - | Placeholder |
className | string | No | - | Tailwind classes for custom styles (only for button). |
Dropdown.MultiSelect | Dropdown.InsetMultiSelect
Name | Type | Required | Default | Description |
---|---|---|---|---|
label | JSX.Element | string | No | - | Label title |
placeholder | JSX.Element | string | No | - | Placeholder |
className | string | No | - | Tailwind classes for custom styles (only for button). |
counter | Number | No | 0 | Number of selected options |