Select

forms

Dropdown select input for choosing from a list of options. Accessible, keyboard navigable, with search/scroll support for long lists. Built on Radix UI with consistent styling. Exports multiple sub-components (Select, SelectTrigger, SelectContent, SelectItem, etc.).

@launch/ui

Live Preview

Overview

Select Component Overview

Built on Radix UI for accessible, customizable dropdowns

Select Component

The Select component is built on Radix UI and provides an accessible, customizable dropdown.

Usage pattern:

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>

Patterns

Common Patterns

Visual representations of select states

Country Selection

Select a country▼

Disabled State

Disabled select▼

Error State

Please select▼

Usage Guidance

✓ When to Use

Use for single-selection from predefined options: country/state selectors, category selection, sorting options, filters, settings dropdowns. Best for 3+ options where radio buttons become unwieldy.

✗ When NOT to Use

Don't use for 2 options (use radio buttons or switch), multiple selections (use checkbox group or multi-select), free text input (use Input with autocomplete), or very long lists without search (use combobox).

Components