Skip to content
DOL Studio

Select

Design: extension Code: Code only formdropdown

Live preview

Sizes — xs / sm / md / lg

4 sizes auto-fit grid: cellMinWidth=240px.
inputSize="xs"
inputSize="sm"
inputSize="md"
inputSize="lg"

States

3 states — pre-selected info tone · invalid · disabled. Auto-fit grid: cellMinWidth=240px.
tone="info" + pre-selected
invalid + required field
disabled

Import & files

Import
import { Select } from "@/components/ui/Select";
Source file
components/ui/Select.tsx

Spec

Spec Props · Usage

Props

Prop Type Default Description
options { value, label }[] - —
value string - —
onChange (v: string) => void - —

Usage

Keep option count ≤10 - beyond that move to a searchable combobox.

Figma note: Playground composition pattern - not a single Figma component category. See Playground source.

Examples

Examples 1
  • Native select

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Select
Domain: general · Category: input
Design: extension · Code: code-only


## Description
Styled native `<select>`. Same density as Input. For advanced cases (search, groups), use a combobox primitive (not in this catalog yet).


## Import
```ts
import { Select } from "@/components/ui/Select";
```
Source: `components/ui/Select.tsx`


## Props (3)
| Prop | Type | Default | Description |
|---|---|---|---|
| `options` | `{ value, label }[]` | - |  |
| `value` | `string` | - |  |
| `onChange` | `(v: string) => void` | - |  |


## Usage
Keep option count ≤10 - beyond that move to a searchable combobox.


## Examples
- **Native select**

Related

  • Select input

    Coded

  • Input

    Coded

  • Uploader

    Coded

  • DatePicker

    Coded

  • Slider

    Coded
  • Label

    Checkbox

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).