Dropdown
ARIA
RTL
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.HiddenInput />
<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
Informative message holder
Hidden input for Select
Informative message holder
Anatomy
<Dropdown>
<Dropdown.InsetSelect>...</Dropdown.InsetSelect>
<Dropdown.HiddenInput />
<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
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 |
Dropdown.HiddenInput
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| name | string | No | - | Label title |
| className | string | No | - | Tailwind classes for custom styles. |
| value | string | number | readonly string[] | undefined | No | _ | Input value |