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

Select

On this page