build69
build69  /  Components  /  Selection & Choice  /  Select

Select

v1.0.4Updated 4 Oct 2026

Native-like select control (Radix). Use for single choice from a moderate list.

View source← Back to catalog

Preview

Live · 13 stories
DefaultOpen ↗
▸Why this is recommendedformselectdropdownchoice+1

The default, out-of-the-box Select.

Recommended for+14
  • ✓Filter dropdowns
  • ✓Form choice fields
  • ✓Country / language pickers
Tags+6
formselectdropdownchoicedefault
Features+4
  • Keyboard navigation
  • Grouped options
  • Searchable variant via Command
  • Labelled by FormField: the root hands id / aria-describedby / aria-invalid / aria-required / className to the trigger button, which then fills the field column (standalone w-fit)
Not recommended for−2
  • ✕Long lists with search (use Command)
  • ✕Few options (use RadioGroup)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Select" })

Usage

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/inputs/select';

<Select>
  <SelectTrigger><SelectValue placeholder="Pick one" /></SelectTrigger>
  <SelectContent>
    <SelectItem value="a">Alpha</SelectItem>
  </SelectContent>
</Select>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Selected value

string—
onValueChange

Value change callback

function—
id

DOM id set on the trigger (given on Select, forwarded to SelectTrigger); FormField clones its field id in, and its label then names the control

string—
aria-describedby

Id(s) of hint or error text describing the trigger (given on Select, forwarded to SelectTrigger) (FormField clones this in)

string—
aria-invalid

Mark the trigger (given on Select, forwarded to SelectTrigger) invalid; FormField clones this in from its error prop

boolean—
aria-required

Mark the trigger (given on Select, forwarded to SelectTrigger) required; FormField clones this in from its required prop

boolean—
className

On Select: classes forwarded to the trigger (a className on SelectTrigger wins); on SelectTrigger: a width here wins over the default (w-full inside a FormField, w-fit otherwise)

string—

Related

Platform docsAll componentsSource files