Select
Displays a list of options for the user to pick from—triggered by a button.
<Select>
<Select.Trigger width={200}>
<Select.Value placeholder="Select a fruit" />
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
<Select.Item value="blueberry">Blueberry</Select.Item>
<Select.Item value="grapes">Grapes</Select.Item>
<Select.Item value="pineapple">Pineapple</Select.Item>
</Select.Group>
</Select.Content>
</Select>
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.
import { Select } from "@raystack/apsara/v1";
<Select>
<Select.Trigger aria-label="Fruit selection">
<Select.Value placeholder="Select a fruit" />
</Select.Trigger>
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
</Select.Content>
</Select>;
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
<Select>
<Select.Trigger aria-label="Fruit selection">
<Select.Value placeholder="Select a fruit" />
</Select.Trigger>
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
</Select.Content>
</Select>
Icon
You can pass leadingIcon
prop to Select.Item to include items
<Select>
<Select.Trigger aria-label="Fruit selection">
<Select.Value placeholder="Select a fruit" />
</Select.Trigger>
<Select.Content>
<Select.Item value="apple" leadingIcon={<Info size={16} />}>
Apple
</Select.Item>
<Select.Item value="banana" leadingIcon={<X size={16} />}>
Banana
</Select.Item>
<Select.Item value="grape" leadingIcon={<Home size={16} />}>
Grape
</Select.Item>
<Select.Item value="Orange" leadingIcon={<Laugh size={16} />}>
Orange
</Select.Item>
</Select.Content>
</Select>
Size
<Flex align="center" gap="large">
<Select>
<Select.Trigger size="small">
<Select.Value placeholder="Small select" />
</Select.Trigger>
<Select.Content>
<Select.Item value="1">Option 1</Select.Item>
<Select.Item value="2">Option 2</Select.Item>
</Select.Content>
</Select>
<Select>
<Select.Trigger>
<Select.Value placeholder="Small select" />
</Select.Trigger>
<Select.Content>
<Select.Item value="1">Option 1</Select.Item>
<Select.Item value="2">Option 2</Select.Item>
</Select.Content>
</Select>
</Flex>
Variant
<Select>
<Select.Trigger>
<Select.Value placeholder="Select..." />
</Select.Trigger>
<Select.Content>
<Select.Item value="all">All</Select.Item>
<Select.Item value="active">Active</Select.Item>
<Select.Item value="inactive">Inactive</Select.Item>
</Select.Content>
</Select>
With Separator
<Select>
<Select.Trigger>
<Select.Value placeholder="Select..." />
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.Item value="1">Option 1</Select.Item>
<Select.Item value="2">Option 2</Select.Item>
</Select.Group>
<Select.Separator />
<Select.Group>
<Select.Item value="3">Option 3</Select.Item>
<Select.Item value="4">Option 4</Select.Item>
</Select.Group>
</Select.Content>
</Select>
Accessibility
The Select component follows WAI-ARIA guidelines:
- Trigger has role
combobox
- Content has role
listbox
- Items have role
option
- ARIA labels and descriptions