Skip to content
Data Input

Select

Dropdown single-select with an options preset or compound parts for custom rows.

React source Core source

Select

Dropdown single-select. Select with options is the assembled preset (label, description, errorMessage, placeholder). Compose Select.Root, Select.Trigger, Select.Value, Select.Popover, Select.ListBox, and Select.Item when a row needs more than a label.

Custom item rows are React-only. Astro and HTML previews keep using a native <select> with the core recipe classes.

Examples

Default

Fruit
Demo.tsxtsx
import { Select } from '@var-ui/react';

<Select
  label="Fruit"
  options={[
    { id: 'apple', label: 'Apple' },
    { id: 'plum', label: 'Plum' },
  ]}
/>

Options list

Pass an options array of { id, label } objects. Use placeholder when no value is selected.

Fruit
Favorite fruit
Demo.tsxtsx
import { Grid, Select } from '@var-ui/react';

const options = [
  { id: 'apple', label: 'Apple' },
  { id: 'plum', label: 'Plum' },
  { id: 'orange', label: 'Orange' },
  { id: 'grape', label: 'Grape' },
];

<Grid columns={2} gap="lg">
  <Select label="Fruit" options={options} />
  <Select label="Favorite fruit" placeholder="Choose a fruit…" options={options} />
</Grid>

Compound parts

Compose parts for custom item content. textValue is the string used for typeahead and the default closed trigger. Compose Select.Value inside Select.Trigger when the closed value should match custom row chrome. Pass portalContainer on Select.Popover when the list must portal into a themed subtree instead of document.body.

Assignee
Demo.tsxtsx
import { Avatar, HStack, Select } from '@var-ui/react';

const PEOPLE = [
  { id: 'ada', name: 'Ada Lovelace' },
  { id: 'grace', name: 'Grace Hopper' },
];

<Select.Root>
  <Select.Label>Assignee</Select.Label>
  <Select.Trigger>
    <Select.Value>
      {({ selectedText, isPlaceholder }) =>
        isPlaceholder ? (
          'Select a person…'
        ) : (
          <HStack gap="sm">
            <Avatar name={selectedText} size="sm" />
            {selectedText}
          </HStack>
        )
      }
    </Select.Value>
  </Select.Trigger>
  <Select.Popover>
    <Select.ListBox>
      {PEOPLE.map((person) => (
        <Select.Item key={person.id} id={person.id} textValue={person.name}>
          <HStack gap="sm">
            <Avatar name={person.name} size="sm" />
            {person.name}
          </HStack>
        </Select.Item>
      ))}
    </Select.ListBox>
  </Select.Popover>
</Select.Root>

Props

Accessibility

Built on React Aria Components where applicable.