Basel Standard / Docs

Select

Overlay-based single selection control for compact option lists inside forms, filters, and settings panels.

Select is for single choices that should stay compact until the user opens them. The Swiss version keeps the Radix interaction model, then aligns the trigger, list, labels, separators, and checked state with the rest of the system's field language.

Installation

Install

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Select defaultValue="curated">
  <SelectTrigger>
    <SelectValue placeholder="Choose archive order" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="curated">Curated order</SelectItem>
    <SelectItem value="latest">Latest first</SelectItem>
  </SelectContent>
</Select>

Why This Primitive Exists

Select is the right control when there is one valid choice from a known list, but the full list does not need to stay visible all the time.

Use it for short to medium option sets in forms, filters, and configuration panels.
Prefer it to radio groups when the list is compact and supporting copy is minimal.
Avoid it when users need to compare rich descriptions across a few options. In that case, radios are usually clearer.

Examples

Basic Selection

The base pattern is a trigger with a placeholder, followed by a content list of items.

<Select defaultValue="curated">
  <SelectTrigger>
    <SelectValue placeholder="Choose archive order" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="curated">Curated order</SelectItem>
    <SelectItem value="latest">Latest first</SelectItem>
  </SelectContent>
</Select>

Grouped Menus

Labels and separators help longer menus stay readable without turning them into an unstructured list.

<SelectContent>
  <SelectGroup>
    <SelectLabel>Editorial</SelectLabel>
    <SelectItem value="editorial">Editorial desk</SelectItem>
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>{/* more items */}</SelectGroup>
</SelectContent>

In Context

Inside forms, select behaves like any other field. The trigger stays in the layout rhythm, and the overlay only appears when the user needs the options.

Publishing panel

Select works well when one choice comes from a compact, comparable list.

The trigger stays inside the form rhythm while the overlay handles the longer option list.

Release market

Release window

Guidance

Choose Select Vs Radio Group Intentionally

Use select when the user already understands the category and only needs one value.
Use radio groups when each option needs visible explanation or direct comparison.
If the list is large enough to need search, a command palette or combobox pattern will be clearer.

Keep Trigger Copy Specific

Write placeholders that describe the missing decision, not generic prompts like Select.
Keep item labels parallel and short enough to scan.
If item meaning depends on context, surface that context in the field label rather than overloading the option text.

Treat It Like A Field

Pair the trigger with Label, helper copy, and validation states like any other form control.
Use groups and separators when the list spans teams, statuses, or categories.
Keep the overlay close to field width unless the content genuinely needs more space.

API Reference

Exports

Export	Renders	Notes
`Select`	`SelectPrimitive.Root`	Root state container.
`SelectGroup`	`SelectPrimitive.Group`	Groups related items inside the content.
`SelectValue`	`SelectPrimitive.Value`	Displays the selected label or placeholder inside the trigger.
`SelectTrigger`	`SelectPrimitive.Trigger`	Field-like trigger with the shared border and chevron.
`SelectContent`	`SelectPrimitive.Content`	Overlay surface that portals the option list.
`SelectLabel`	`SelectPrimitive.Label`	Uppercase list heading for grouped options.
`SelectItem`	`SelectPrimitive.Item`	One selectable row with the checked indicator.
`SelectSeparator`	`SelectPrimitive.Separator`	Divider line between groups.
`SelectScrollUpButton` / `SelectScrollDownButton`	Radix scroll controls	Included automatically by `SelectContent`.

Notable Props

Export	Prop	Type	Notes
`Select`	`value`, `defaultValue`	`string`	Controlled or uncontrolled selected value.
`Select`	`onValueChange`	`(value: string) => void`	Fires when the selected item changes.
`SelectTrigger`	`className`	`string`	Extends the field styling.
`SelectContent`	`position`	`"item-aligned" \| "popper"`	Defaults to `"popper"` in this wrapper.
`SelectItem`	`value`	`string`	Required unique value.
`SelectItem`	`disabled`	`boolean`	Disables an option while keeping it visible in the list.

Visual Notes

Area	Detail
Trigger	Uses the system field height, placeholder color, and stronger focus inset treatment.
Content	Border-only card surface with no heavy shadow.
Item state	Highlighted and checked items share the calmer panel background treatment.
Group labels	Small uppercase labels help long lists stay ordered.

The component family remains a thin wrapper around Radix Select, so standard root, trigger, and item props are still available.

Previous: Scroll Area Next: Separator