Selectshadcn
One choice from a short list.
Inputs- Install
- npx shadcn add select
- Import from
- @/components/ui/select
- Guidance
- draft · v0.1.0
Examples
As installed from shadcn – rendering in jsp-ds tokens through the bridge.
Guidance
When to use
- One choice from a short, known list – about three to ten options.
When not to use
- Two to five options people should compare – use a Radio group, where all are visible.
- Long lists, or lists people will search – use a combobox.
- Several choices – use checkboxes.
Rules
- A visible label, as with every control.
- Order options in a way people expect: by frequency, alphabetically, or in a natural order (sizes, dates).
- Use a placeholder (Choose a plan) only when there's no sensible default.
Spec
The variables this component reads, and the jsp-ds token behind each, resolved live. Switch mode to see them change.
| Token | CSS variable | Value now |
|---|---|---|
| color.border.subtleBorder (ISS-16) | --input | … |
| color.focus.ring | --ring | … |
| color.text.subtlePlaceholder and help text | --muted-foreground | … |
| color.action.destructive.textInvalid | --destructive | … |
| radius.md | --radius-md | … |
Install
Terminal
npx shadcn add selectImport
import { Select } from "@/components/ui/select"From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.