Primitive
Select
Accessible single-choice select built on @radix-ui/react-select. The trigger borrows Button's outline + radius so it sits naturally inside CardActions; the dropdown content is a portaled popover with viewport-clamped max height. Compose Select.Root with SelectTrigger, SelectContent, and SelectItem.
Preview
Class
| Class | When applied |
|---|---|
.asset-select-trigger | Trigger button — same outline style as .asset-button, with a built-in chevron icon on the right. |
.asset-select-icon | Chevron wrapper inside the trigger. Tinted muted-foreground. |
.asset-select-content | Portaled dropdown panel — bordered card with a soft drop shadow. Width matches the trigger via --radix-select-trigger-width. |
.asset-select-viewport | Scroll viewport inside the content. 4px padding around items. |
.asset-select-item | Each option. data-highlighted swaps to surface tone; data-state="checked" bolds the label and shows the indicator. |
.asset-select-item-indicator | Check icon shown on the selected item. |
.asset-select-separator | 1px separator between option groups. |
CSS variables
Override these on any ancestor scope (or globally) to restyle this primitive. See the CSS Variables reference for the full token list and Theming for override patterns.
| Variable | Affects |
|---|---|
--asset-radius | Corner radius of the trigger and dropdown content (matches Button); item rows use ÷4 for tighter inset corners. |
--asset-border | Trigger outline, content border, and separator color. |
--asset-card | Trigger and dropdown background. |
--asset-surface | Trigger hover/open background and item highlight background. |
--asset-foreground | Trigger label and option text. |
--asset-muted-foreground | Chevron icon and placeholder text. |
--asset-font-sans | Trigger and option font family. |