Select

Presents a selection of choices to the user, activated by a button.

View code

Features

Full keyboard navigation
Can be controlled or uncontrolled
Typeahead support
Optional arrow component
Custom positioning

Anatomy

Trigger: The button that opens/closes the select menu
Menu: The popover select menu
Option: The individual select options
Arrow: An optional arrow component

API Reference

createSelect

Props

Prop	Default	Type / Description
`required`	`false`	`boolean` Whether or not the select is required.
`disabled`	`false`	`boolean` Whether or not the select is disabled.
`label`	-	`string` The label of the select.
`value`	-	`unknown` The value of the select.
`name`	-	`string` The name of the select.
`preventScroll`	`true`	`boolean` Whether or not to prevent scrolling of the document when the select is open.
`loop`	`false`	`boolean` Whether or not the focus should loop back to the first item when the last item is reached.

Returned Props

Returned Prop	Type	Description
`options`	`Writable<CreateSelectProps>`	A writable store that can be used to update the select props.
`open`	`Writable<boolean>`	A writable store that can be used to update the select open state.
`isSelected`	`Readable<(value: unknown) => boolean>`	A derived store that returns whether or not the given value is selected.
`value`	`Writable<unknown>`	A writable store that can be used to update the select value.
`label`	`Writable<string \| number \| null>`	A writable store that can be used to update the select label.
`trigger`	-	The builder store used to create the select trigger.
`menu`	-	The builder store used to create the select menu.
`option`	-	The builder store used to create the select options.
`input`	-	The builder store used to create the select input.
`separator`	-	The builder store used to create the select separator.
`group`	-	The builder store used to create the select group.
`groupLabel`	-	The builder store used to create the select group label.
`arrow`	-	The builder store used to create the select arrow.

trigger

Data Attributes

Data Attribute	Value
`[data-state]`	`'open' \| 'closed'`
`[data-disabled]`	Present when the select is disabled.
`[data-melt-select-trigger]`	Present on all trigger elements.

Data Attributes

Data Attribute	Value
`[data-melt-select-menu]`	Present on all menu elements.

option

Props

Prop	Default	Type / Description
`label`	-	`string` The label of the option.
`value` *	-	`unknown` The value of the option.
`disabled`	`false`	`boolean` Whether or not the option is disabled.

group

Props

Prop	Default	Type / Description
`key`	-	`string` A unique key for the group.

Data Attributes

Data Attribute	Value
`[data-melt-select-group]`	Present on all group elements.

groupLabel

Props

Prop	Default	Type / Description
`key`	-	`string` A unique key for the group.

Data Attributes

Data Attribute	Value
`[data-melt-select-group-label]`	Present on all group-label elements.

input

Data Attributes

Data Attribute	Value
`[data-melt-select-input]`	Present on all input elements.

separator

Data Attributes

Data Attribute	Value
`[data-melt-select-separator]`	Present on all separator elements.

arrow

Data Attributes

Data Attribute	Value
`[data-arrow]`	`'true'`
`[data-melt-select-arrow]`	Present on all arrow elements.

Accessibility

Adheres to the ListBox WAI-ARIA design pattern

Key	Behavior
`Space`	When focus is on the `trigger`, opens the select and focuses the selected option. When focus is on an `option`, selects the focused option.
`Enter`	When focus is on the `trigger`, opens the select and focuses the selected option. When focus is on an `option`, selects the focused option.
`ArrowDown`	When focus is on the `trigger`, opens the select. When focus is on an `option`, moves focus to the next option.
`ArrowUp`	When focus is on the `trigger`, opens the select. When focus is on an `option`, moves focus to the previous option.
`Esc`	Closes the select and moves focus to the `trigger`.

On This Page