‹ components

Select

stablev1.0.0·open in canvas

Single-value select on Radix Select; trigger matches Input's md height.

Installnpx shadcn add @cids/select
Live demo

Motion · tap to replay

honors reduced-motion

Panel fade via Radix presets; highlight moves instantly.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Select } from "@/design-system";

<Select aria-label="Network" options={[{value:"sol",label:"Solana"}]} value={net} onValueChange={setNet} />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

Single-value select on Radix Select; trigger matches Input's md height.

Anatomy

+ value            v +  <- trigger (h-9, container)
| Solana          ok |  <- popper panel, surface-bright
| Ethereum           |     highlight: container-high

Props

PropTypeDefaultNotes
optionsSelectOption<T>[]--{value,label,disabled?}.
value / onValueChangecontrolled pair--
placeholderstring"Select..."Shown via data-placeholder.
disabledboolean--
classNamestring--cn-merged onto the trigger.
aria-labelstring--Name the control when no visible label.

Motion

Panel fade via Radix presets; highlight moves instantly.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.