Select

Overview

Select lets users choose a single option from a dropdown list. It’s built on Radix UI Select, so it’s fully keyboard accessible (type-ahead, arrow keys, Esc), manages focus, and exposes the right roles to assistive technology. Long lists scroll within the popover.

It is a compound component: a Select root wraps a SelectTrigger (showing the current SelectValue) and a SelectContent holding the SelectItems. Use it for choosing from a moderate set of options; for free-text entry use an Input, and for a lightweight filter with counts use a Radio Dropdown.

Usage

Import the parts you need:

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@eqtylab/equality";

Compose a controlled select. SelectValue’s placeholder shows before a choice is made:

const [value, setValue] = useState("");

<Select value={value} onValueChange={setValue}>
  <SelectTrigger id="fruit">
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="orange">Orange</SelectItem>
    <SelectItem value="pear">Pear</SelectItem>
  </SelectContent>
</Select>;

Select can be controlled (value + onValueChange) or uncontrolled (defaultValue). Pair the trigger with a Label via id/htmlFor for an accessible caption.

Variants

Default

Disabled

Set disabled on the Select root to disable the whole control.

Pre-selected

Use defaultValue on the root to start with an option chosen. Long lists scroll within the popover.

Elevations

Set the elevation prop on SelectContent to place the dropdown on the elevation scale. overlay is the default.

Sunken

Base

Raised

Overlay (default)

Usage

import { ELEVATION } from "@eqtylab/equality";

<SelectContent elevation={ELEVATION.RAISED}>…</SelectContent>;

Slots

Props

The parts forward their Radix Select props (and className). The most commonly used are below.