Component
Select
Token-styled dropdown built on Radix Select. Matches Input shape; replaces the native <select> on mobile and web.
9:41
Currently: Class of 2030
Class-of-year picker
Trigger uses the same h-12 rounded-xl shape as Input. Chevron rotates 180° on data-state="open". Selected items render in brand color with a check glyph. Keyboard nav, type-ahead, and ARIA wiring come from Radix.
Composition
| Prop | Type | Default | Description |
|---|---|---|---|
| Select | Radix Root | — | Top-level wrapper. Takes value / onValueChange (controlled) or defaultValue. |
| SelectTrigger | Radix Trigger | — | The clickable field. Renders the value + chevron. All HTMLButtonProps forwarded. |
| SelectValue | Radix Value | — | Displays the currently selected value. Supports placeholder prop for empty state. |
| SelectContent | Radix Content (popper) | — | Floating panel. Animated open/close via tw-animate-css and Radix data-state. |
| SelectItem | Radix Item | — | One option row. Highlighted on hover/keyboard, brand-colored when checked. |
| SelectGroup / SelectLabel / SelectSeparator | Radix primitives | — | Optional grouping and dividers inside the content panel. |