form · Normal DOM only

Select

Single-value picker from a known short list. Radix-backed — keyboard arrows, type-to-jump, escape.

Pick one of a closed set of options (deal stage, currency, time zone short list). For long lists or fuzzy matching reach for Combobox instead — it has built-in search.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Select } from '@8maverik8/twenty-design';

Examples

Deal stage

Pick a stage…
tsx
<Select
  options={[
    { value: 'new', label: 'New' },
    { value: 'qualified', label: 'Qualified' },
    { value: 'won', label: 'Won' },
    { value: 'lost', label: 'Lost', disabled: true },
  ]}
  placeholder="Pick a stage…"
/>

Sizes

USD
USD
tsx
<Select size="sm" options={[…]} defaultValue="usd" />
<Select size="md" options={[…]} defaultValue="usd" />

Guidelines

✓
Provide a placeholder that disappears once a value is picked.Empty selects without placeholders make the user wonder if the form is broken.
✓
Reach for Combobox the moment your list passes ~7 items.Above that Radix Select becomes a scroll wall — search wins.
✕
Mark a Select disabled to "lock" a value while still letting the user click it.If the user must see the value but can’t change it, render plain text instead — disabled controls are still focusable.