Select
Displays a list of options for the user to pick from—triggered by a button.
Usage
The Popover component provides a way to display rich content in a portal when triggered by a button. It supports accessibility features, positioning options, and customizable styling.
Select Props
Select.Trigger Props
Prop | Type | Default |
---|---|---|
size | "small" | "medium" | - |
variant | "default" | "filter" | - |
iconProps | Record<string, any> | - |
ariaLabel | string | - |
ariaDescribedby | string | - |
ariaRequired | boolean | - |
ariaInvalid | boolean | - |
Select.Content Props
Prop | Type | Default |
---|---|---|
position | "item-aligned" | "popper" | "popper" |
className | string | - |
Select.Item Props
Prop | Type | Default |
---|---|---|
value | string | - |
textProps | Record<string, any> | - |
className | string | - |
Examples
Basic Select
Size
Variant
With Separator
Accessibility
The Select component follows WAI-ARIA guidelines:
- Trigger has role
combobox
- Content has role
listbox
- Items have role
option
- ARIA labels and descriptions