Skip to content
DOL Studio

Select input

Design: Stable Code: Coded formdropdownsearch 45 Figma sets .Select button/Size

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 input } from "@dol/ui/select";
Source file
packages/@dol/ui/src/select/Select.tsx

Figma source

Figma source 45 sets
Page
Select input
Sets
45
Primary set
.Select button/Size · 8 variants Open in Figma →
Showing: .Select button/Size
11 other sets (+ 33 more not listed)
  • Dropdown content/Empty state search dropdown 3 variants Figma →
  • Dropdown item content/General 6 variants Figma →
  • Dropdown item/Dropdown button 64 variants Figma →
  • Dropdown item/Dropdown button - style 2 24 variants Figma →
  • Grabber 2 variants Figma →
  • Group label 2 variants Figma →
  • Grouped dropdown 2 variants Figma →
  • Input/Outline/Inline Dropdown, Select 10 variants Figma →
  • Select button 6 variants Figma →
  • Select dropdown/Simple options dropdown - style 1 card 2 variants Figma →
  • Select dropdown/Simple options dropdown - style 2 block 2 variants Figma →

AI context

AI context

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

# Select input
Slug: `select-input`
Domain: general · Category: input
Design: stable · Code: coded


## Description
Dropdown selector with single + multi-select, search, empty state, and grouped options. 43 sets cover button shape + dropdown content + item layouts.


## Import
```ts
import { Select input } from "@dol/ui/select";
```
Source: `packages/@dol/ui/src/select/Select.tsx`


## Figma source
Page: Select input
Sets: 45
Primary: .Select button/Size
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=34236-10971

Related

  • Select

    Code only

  • 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).