Select

Pick one value from a list. Keyboard and screen-reader ready.

Team

Design

Role

Select a role

You can change it later.

SelectLive · light and dark follow the theme switch

Usage

import { Select } from '@stanvision/atomus-react';

const [team, setTeam] = useState('design');

<Select
  label="Team"
  value={team}
  onChange={setTeam}
  options={[
    { value: 'design', label: 'Design' },
    { value: 'product', label: 'Product' },
  ]}
/>

Pick one value from a list of 5–15 options. Uses the Input heights (sm 32 · md 40 · lg 48) and the Menu item rows for the list.

Provide

• options — [{ value, label, icon?, disabled? }]; value + onChange or defaultValue.
• label (always), placeholder, hint, error, size, disabled, name for forms.
• Keyboard: ↑ ↓ Home End to move, Enter to pick, Esc to close, letters jump to a match.

Don’t

• Don’t use for 2–4 options — use Radio or Tabs (segmented).
• Don’t use for more than ~15 options — add search (Combobox, coming next).

In Figma

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.