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.

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

PropTypeDefault
size
"small" | "medium"
-
variant
"default" | "filter"
-
iconProps
Record<string, any>
-
ariaLabel
string
-
ariaDescribedby
string
-
ariaRequired
boolean
-
ariaInvalid
boolean
-

Select.Content Props

PropTypeDefault
position
"item-aligned" | "popper"
"popper"
className
string
-

Select.Item Props

PropTypeDefault
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>

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

On this page