Select

Displays a list of options for the user to pick from.

Installation

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@gradeui/ui"

Usage

Examples

With Label

Project Visibility

With Default Value

Disabled

Props

Prop	Type	Default	Description
value	string	-	The controlled value of the select.
defaultValue	string	-	The default value when uncontrolled.
onValueChange	(value: string) => void	-	Callback when the value changes.
disabled	boolean	false	Whether the select is disabled.
placeholder	string	-	Placeholder text when no value is selected.

Accessibility

Full keyboard navigation support
WAI-ARIA compliant listbox pattern
Supports screen readers
Type-ahead search functionality

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/select.md and shipped inside the published @gradeui/ui tarball.

---
name: Select
import: "@gradeui/ui"
subcomponents: [SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator]
props:
  - Select: value?, onValueChange?, defaultValue?, disabled? — Radix root
  - SelectTrigger: wraps the clickable control; nest SelectValue inside
  - SelectValue: placeholder?: string — text when nothing is selected
  - SelectContent: accepts items via children
  - SelectItem: value: string — required; content is the label
when_to_use: Single-choice from 3+ known options. Fewer than 3 → RadioGroup. Huge list with search → use a Combobox (not in DS yet). Multi-select → not supported by this primitive.
composes_with: [Label (above SelectTrigger), Form, Card]
aliases: [dropdown, combobox, picker, select, pop-up button, popup button, popup picker, picker view, rnpickerselect, react native picker, native picker]
---

```jsx
<Select defaultValue="apple">
  <SelectTrigger><SelectValue placeholder="Pick a fruit" /></SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>
```

Label

Multi Select