Select

Displays a list of options for the user to pick from.

Anatomy

To set up the select correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Select component in your project. Let’s take a look at the most basic example:

Advanced Customization

For advanced customizations and item properties like disabled:

Multiple Selection

To enable multiple item selection:

Controlled Component

For scenarios where you want to control the Select component’s state:

Usage with a Form Library

See how to use the Select component with popular form libraries:

TypeScript Caveats in Vue

Under the hood for React and Solid frameworks, we supply a complex prop type with a generic so that the type of the items prop matches the param type in the function signatures for props such as the isItemDisabled prop, say. (See the api reference table below) Unfortunately, generic typing is not supported in Vue for components that contain props with slots and/or emits. Therefore, you will not expect updated typing in this way.

If you have a solution or a workaround to this problem, we would love the contribution and request that you open a Github idea discussion to let us know a PoC you have to share!

API Reference

Root

PropTypeDefault
items
T[] | readonly T[]
asChild
boolean
closeOnSelect
boolean
defaultOpen
boolean
defaultValue
string[]
disabled
boolean
form
string
highlightedValue
string
id
string
ids
Partial<{ root: string content: string control: string trigger: string clearTrigger: string label: string hiddenSelect: string positioner: string item(id: string | number): string itemGroup(id: string | number): string itemGroupLabel(id: string | number): string }>
invalid
boolean
isItemDisabled
(item: T) => boolean
itemToString
(item: T) => string
itemToValue
(item: T) => string
lazyMount
booleanfalse
loopFocus
boolean
multiple
boolean
name
string
onExitComplete
() => void
onFocusOutside
(event: FocusOutsideEvent) => void
onHighlightChange
(details: HighlightChangeDetails<T>) => void
onInteractOutside
(event: InteractOutsideEvent) => void
onOpenChange
(details: OpenChangeDetails) => void
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
onValueChange
(details: ValueChangeDetails<T>) => void
open
boolean
positioning
PositioningOptions
present
boolean
readOnly
boolean
scrollToIndexFn
(details: ScrollToIndexDetails) => void
unmountOnExit
booleanfalse
value
string[]

ClearTrigger

PropTypeDefault
asChild
boolean

Content

PropTypeDefault
asChild
boolean

Control

PropTypeDefault
asChild
boolean

HiddenSelect

PropTypeDefault
asChild
boolean

Indicator

PropTypeDefault
asChild
boolean

ItemGroupLabel

PropTypeDefault
asChild
boolean

ItemGroup

PropTypeDefault
asChild
boolean

ItemIndicator

PropTypeDefault
asChild
boolean

Item

PropTypeDefault
asChild
boolean
item
any

ItemText

PropTypeDefault
asChild
boolean

Label

PropTypeDefault
asChild
boolean

Positioner

PropTypeDefault
asChild
boolean

Trigger

PropTypeDefault
asChild
boolean

ValueText

PropTypeDefault
asChild
boolean
placeholder
string