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.

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

Small

Informative message holder

Medium

Informative message holder

Large

Informative message holder

Different states for Select

Error

Informative message holder

Disabled

Informative message holder

List options width

Informative message holder

Hidden input for Select

With hidden input

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

Anatomy

<Dropdown>
  <Dropdown.MultiSelect>...</Dropdown.MultiSelect>
  <Dropdown.Options>
    <Dropdown.Option>...</Dropdown.Option>
  </Dropdown.Options>
  <Dropdown.Hint>...</Dropdown.Hint>
</Dropdown>

MultiSelect

Small

Informative message holder

Medium

Informative message holder

Large

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