Select

A select displays a collapsible list of options and allows a user to select one of them.

Preview

Code

This is a label for a fieldThis is a description for a field

Examples

Preview

Code

This is a label for a fieldThis is a description for a field

Preview

Code

This is a label for a fieldThis is a description for a field

Preview

Code

This is a label for a fieldThis is a description for a field

Preview

Code

This is a label for a fieldThis is a description for a field

Name	Type	Default
`placeholder`	`string`	`'Select an item' (localized)`
`isDisabled`	`boolean`	—
`autoFocus`	`boolean`	—
`onFocus`	`((e: FocusEvent<Element, Element>) => void)`	—
`onBlur`	`((e: FocusEvent<Element, Element>) => void)`	—
`onFocusChange`	`((isFocused: boolean) => void)`	—
`onKeyDown`	`((e: KeyboardEvent) => void)`	—
`onKeyUp`	`((e: KeyboardEvent) => void)`	—
`id`	`string`	—
`disabledKeys`	`Iterable<Key>`	—
`excludeFromTabOrder`	`boolean`	—
`name`	`string`	—
`isRequired`	`boolean`	—
`isInvalid`	`boolean`	—
`validate`	`((value: Key) => true` \| `ValidationError` \| `null)`	—
`autoComplete`	`string`	—
`onSelectionChange`	`((key: Key` \| `null) => void)`	—
`selectedKey`	`Key` \| `null`	—
`defaultSelectedKey`	`Key`	—
`onOpenChange`	`((isOpen: boolean) => void)`	—
`isOpen`	`boolean`	—
`defaultOpen`	`boolean`	—
`validationBehavior`	`"native"` \| `"aria"`	`'native'`
`children`	`ReactNode` \| `((values: SelectRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`	—
`className`	`string` \| `((values: SelectRenderProps & { defaultClassName: string; }) => string)`	—
`style`	`CSSProperties` \| `((values: SelectRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)`	—
`slot`	`string` \| `null`	—
`items`	`Iterable<T>`	—
`ref`	`ForwardedRef<HTMLDivElement>`	—
`showCheckmarkOnSelected`	`boolean`	—