Select

Displays a list of options for the user to pick from—triggered by a button.

Features

Can be controlled or uncontrolled.
Offers 2 positioning modes.
Supports items, labels, groups of items.
Focus is fully managed.
Full keyboard navigation.
Supports custom placeholder.
Typeahead support.
Supports Right to Left direction.

Install

Import

API

Root

Props	Type	Default
autocomplete	`string`	-
defaultOpen	`boolean`	false
defaultValue	`string`	''
dir	`Direction`	ltr
disabled	`boolean`	false
modelValue	`string`	undefined
name	`string`	-
open	`boolean`	undefined
orientation	`DataOrientation`	vertical
required	`boolean`	false

Event	Type
update:modelValue	`[_value: string]`
update:open	`[_open: boolean]`

Trigger

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false
disabled	`boolean`	false

Data attribute	Value
[data-state]	'open' \| 'closed'
[data-disabled]	Present when disabled
[data-placeholder]	Present when has placeholder

Portal

Props	Type	Default
disabled	`boolean`	false
forceMount	`boolean`	false
to	`string \| HTMLElement`	body

Content

Props	Type	Default
align	`'start' \| 'center' \| 'end'`	start
alignOffset	`number`	0
arrowPadding	`number`	0
as	`AsTag \| Component`	div
asChild	`boolean`	false
avoidCollisions	`boolean`	true
collisionBoundary	`Element \| (Element \| null)[] \| null`	() => []
collisionPadding	`number \| Partial<Record<'top' \| 'right' \| 'bottom' \| 'left', number>>`	0
forceMount	`boolean`	false
hideWhenDetached	`boolean`	false
position	`'item-aligned' \| 'popper'`	item-aligned
prioritizePosition	`boolean`	false
side	`'top' \| 'right' \| 'bottom' \| 'left'`	bottom
sideOffset	`number`	0
sticky	`'partial' \| 'always'`	partial
updatePositionStrategy	`'always' \| 'optimized'`	optimized

Event	Type
closeAutoFocus	`[_event: Event]`
escapeKeyDown	`[_event: KeyboardEvent]`
pointerDownOutside	`[_event: PointerDownOutsideEvent]`

Data attribute	Value
[data-state]	'open' \| 'closed'
[data-side]	'left' \| 'right' \| 'top' \| 'bottom'
[data-align]	'start' \| 'end' \| 'center'

ScrollUpButton

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false

ScrollDownButton

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false

Viewport

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
nonce	`string`	-

Item

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
disabled	`boolean`	false
textValue	`string`	-
value	`string`	on

Data attribute	Value
[data-state]	'open' \| 'closed'
[data-disabled]	Present when disabled
[data-placeholder]	Present when has placeholder

Group

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false

Label

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
for	`string`	-

Separator

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false

Value

Props	Type	Default
as	`AsTag \| Component`	span
asChild	`boolean`	false
placeholder	`string`	''

ItemIndicator

Props	Type	Default
as	`AsTag \| Component`	span
asChild	`boolean`	false

ItemText

Props	Type	Default
as	`AsTag \| Component`	span
asChild	`boolean`	false

Icon

Props	Type	Default
as	`AsTag \| Component`	span
asChild	`boolean`	false

Arrow

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
height	`number`	5
width	`number`	10