Select

Single-value dropdown built on reka-ui. For pickers that need search across many options, use Combobox instead.

Default

Trigger, value placeholder, then SelectItem rows inside Content.

Group options with SelectGroup and SelectLabel. Labels are visual separators, not selectable.

The disabled attribute on the Select root disables the trigger.

Props, events, and slots for each sub-component.

Props

Prop	Type	Default	Description
modelValue	string	—	Selected value. Supports v-model.
defaultValue	string	—	Starting value when v-model is not used.
disabled	boolean	false	Disable the entire select.

Events

Event	Description
update:modelValue	Fires when the value changes. Enables v-model.
update:open	Fires when the dropdown opens or closes.

Props

Prop	Type	Default	Description
class	string	—	Use class to set trigger width (e.g. w-[220px]).

Props

Prop	Type	Default	Description
value	string	—	Value committed when selected.
disabled	boolean	false	Block selection of this item.

Events

Event	Description
select	Fires when the item is chosen.

Props

Prop	Type	Default	Description
placeholder	string	—	(SelectValue) Text shown when nothing is selected. Group/Label organise items; Separator divides them.

Keyboard shortcuts and ARIA behavior.

Keyboard

Shortcut	Description
`Space`	Opens the listbox when the trigger is focused.
`Enter`	Opens the listbox, or selects the highlighted option.
`↑`	Moves the highlight to the previous option.
`↓`	Moves the highlight to the next option.
`Home`	Moves the highlight to the first option.
`End`	Moves the highlight to the last option.
`Esc`	Closes the listbox and returns focus to the trigger.

Follows the listbox pattern; the trigger exposes aria-expanded and the active option via aria-activedescendant.
Type-ahead jumps to options whose label starts with the typed characters.
Selected option is marked with aria-selected.