Select

Base UI

A ruled dropdown for choosing from a short list.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/select.json

Also installs @base-ui/react.

Usage

import { Select } from "@/components/spotcheck/select"

<Select
  label="Model"
  options={[{ value: "atlas-l", label: "atlas-l" }, { value: "atlas-m", label: "atlas-m" }]}
  value={model}
  onValueChange={setModel}
/>

Props

labelstringDefault —Names the control for screen readers, unless it sits inside a Field.
options * RequiredSelectOption[]Default —
valuestringDefault —The selected value, when you control it.
defaultValuestringDefault —The starting value, when it manages itself.
onValueChange(value: string) => voidDefault —
placeholderstringDefault Choose
classNamestringDefault —

Keyboard

Space	Open the list
↑ ↓	Move through options
Enter	Choose an option
Esc	Close without changing

Reduced motion

The list appears without animation.