Select

Select provides an anchored menu for choosing one or many options, with optional icons, filtering, and validation text.

Field spacing belongs to the surrounding layout; preserve its intended density instead of normalizing every field group to one gap. labelClearance accepts a CSS length for local block-start clearance and can inherit a subtree default from fieldContextKey; it adds to any parent gap. See the floating label spacing guide.

Coffeearrow_drop_down

Coffee

Anatomy

Highlight

Element	Part	Selector
<div>	root	[data-scope="select"][data-part="root"] left_clickLMBCopy
<div>	trigger	[data-scope="select"][data-part="trigger"] left_clickLMBCopy
<button>	clear-buttonconditional	[data-scope="select"][data-part="clear-button"] left_clickLMBCopy
<Icon>	clear-icon	[data-scope="select"][data-part="clear-icon"] left_clickLMBCopy
<span>	indicator	[data-scope="select"][data-part="indicator"] left_clickLMBCopy
<Menu>	menu	[data-scope="select"][data-part="menu"] left_clickLMBCopy
<TransitionGroup>	options	[data-scope="select"][data-part="options"] left_clickLMBCopy
<MenuItem>	option	[data-scope="select"][data-part="option"] left_clickLMBCopy
<span>	option-leading-content	[data-scope="select"][data-part="option-leading-content"] left_clickLMBCopy
<span>	option-check	[data-scope="select"][data-part="option-check"] left_clickLMBCopy
<span>	option-iconconditional	[data-scope="select"][data-part="option-icon"] left_clickLMBCopy
<div>	emptyconditional	[data-scope="select"][data-part="empty"] left_clickLMBCopy

Props

Name	Description	Default	Control
labelOptional	Visible label. If omitted, provide aria-label via attrs. string | undefined	undefined
idOptional	Optional explicit id for the trigger element. string | undefined	undefined
optionsRequired	Selectable options rendered in the menu. SelectOption[]	-	-
supportingTextOptional	Supporting text shown below the field when not in error state. string | undefined	undefined
errorOptional	Error text shown below the field. When provided, field is invalid. string | undefined	undefined
disabledOptional	Whether the control is disabled. boolean | undefined	false
requiredOptional	Whether the control is required. boolean | undefined	false
nameOptional	Name used for hidden inputs during form submission. string | undefined	undefined
placeholderOptional	Placeholder shown when nothing is selected. string | undefined	undefined
sizeOptional	The trigger height. Matches the 32px, 40px, and 56px TextField and Button sizes. TextFieldSize | undefined	"medium"	-
labelClearanceOptional	CSS length reserved at block-start for the floating label. Overrides FieldContext. string | undefined	undefined
multipleOptional	Enables multi-select behavior. boolean | undefined	false	-
clearableOptional	Shows a trailing button that clears the current selection. boolean | undefined	false
clearLabelOptional	Accessible label for the clear button. string | undefined	undefined
menuColorOptional	Visual color style of the dropdown menu. MenuColor | undefined	"standard"	-
displaySeparatorOptional	Separator used when showing multiple selected labels. string | undefined	", "
filterableOptional	Enables a filter field inside the menu to narrow long option lists. boolean | undefined	false
filterPlaceholderOptional	Placeholder shown in the menu filter field. string | undefined	undefined
filterNoResultsTextOptional	Message shown when filtering returns no matching options. string | undefined	undefined
modelValueOptional	- SelectModelValue	-	-
openOptional	- boolean | undefined	false

Events5

Name	Type	Description
update:open	[value: boolean]	-
update:modelValue	[value: SelectModelValue]	-
change	[value: SelectModelValue]	-
focus	[event: FocusEvent]	-
blur	[event: FocusEvent]	-

Slots6

Name	Parameters	Description
leading	-	-
prefix	-	-
suffix	-	-
trailing	-	-
optionLeading	-	-
optionTrailing	-	-

Examples

Sizes and toolbar alignment

Select uses the same extra-small (32px), small (40px), and medium (56px) trigger sizes as TextField. The default remains medium.

searchclose

Coffeearrow_drop_down

Coffee

searchclose

Coffeearrow_drop_down

Coffee

searchclose

Coffeearrow_drop_down

Coffee

Default

Coffeearrow_drop_down

Coffee

Without Icons

Coffeearrow_drop_down

Coffee

Filtering

Statearrow_drop_down

State

Configurations

Coffeearrow_drop_down

Coffee

Single selection

Beans to restockarrow_drop_down

Beans to restock

Multiple selection stays open after each pick.

Coffeearrow_drop_down

Coffee

Selection required

Composable

useSelect

function useSelect(opts: UseSelectOptions): UseSelectReturn

Source: src/composables/useSelect.ts

Field	Type	Required	Description	Default
options	() => UseSelectOption[]	Yes	The selectable options.	-
multiple	() => boolean	Yes	Whether multi-select is enabled.	-
filterable	() => boolean	Yes	Whether filtering is enabled.	-
disabled	() => boolean	Yes	Whether the control is disabled.	-
displaySeparator	() => string	Yes	Separator for display text in multi-select mode.	-
locale	(() => string | undefined) | undefined	No	BCP 47 locale used for locale-sensitive filtering.	-
modelValue	Ref<UseSelectModelValue, UseSelectModelValue>	Yes	Model value ref (external).	-
open	Ref<boolean, boolean>	Yes	Open state ref (external).	-
onChange	((value: UseSelectModelValue) => void) | undefined	No	Called when value changes.	-
menuRef	SelectMenuRef	Yes	Ref to the menu exposed API.	-
triggerRef	Ref<HTMLElement | undefined, HTMLElement | undefined>	Yes	Ref to the trigger element.	-
textFieldRef	SelectTextFieldRef	Yes	Ref to the text field exposed API.	-

Field	Type	Required	Description	Default
filterQuery	Ref<string, string>	Yes	Current filter query string.	-
selectedOptions	ComputedRef<UseSelectOption[]>	Yes	Options selected based on current model value.	-
hasValue	ComputedRef<boolean>	Yes	Whether any value is selected.	-
displayText	ComputedRef<string>	Yes	Display text for the current selection.	-
submittedValues	ComputedRef<string[]>	Yes	Values to submit in hidden form inputs.	-
filteredOptionEntries	ComputedRef<{ option: UseSelectOption; index: number; }[]>	Yes	Filtered option entries with original indices.	-
hasFilteredOptions	ComputedRef<boolean>	Yes	Whether there are any filtered options.	-
isOptionSelected	(option: UseSelectOption) => boolean	Yes	Check if an option is currently selected.	-
toggleOption	(option: UseSelectOption) => void	Yes	Toggle an option in the selection.	-
clearValue	() => void	Yes	Clear the current selection.	-
handleMenuSelect	(event: MouseEvent, itemElement: HTMLElement) => void	Yes	Handle menu item selection event.	-
focus	() => void	Yes	Focus the text field.	-
blur	() => void	Yes	Blur the text field.	-
show	() => Promise<void>	Yes	Show the menu.	-
hide	() => void	Yes	Hide the menu.	-
toggle	() => void	Yes	Toggle the menu.	-
openMenu	(focus?: "first" | "last") => void	Yes	Open menu with optional focus target.	-
closeMenu	() => void	Yes	Close the menu.	-
handleFieldClick	() => void	Yes	Handle click on the trigger field.	-
handleFieldInput	() => void	Yes	Handle input on the filter field.	-
handleFilterKeydown	(event: KeyboardEvent) => void	Yes	Handle keydown on the filter field.	-