Select
Trigger: Level 2, Content: Level 3, with flat items for clean nested usage.
Basic Select
Animated Icon States
Rotate Icon
Swap Icon
Animated Content & Items
Enhanced animations with spring effects on items and smooth content transitions.
Grouped Options
Sizes
With Icons
Disabled State
Best Practices
Standalone (Trigger: Level 2)
Keep the trigger quiet; optionally bump menu shadow for busy lists.
Nested in Card (Inset Trigger)
When a container already owns elevation, drop the trigger to an inset surface.
Anti-patterns
Too much elevation
Avoid using strong hover-lift triggers inside another elevated surface.
Correct
Keep the trigger flat/inset; let the menu content carry the main elevation.
API Reference
Select is built on Radix Select. Keep triggers quiet (inset/section) and let the menu carry the main elevation.
SelectTrigger Props
PropTypeDescription
size"sm" | "default" | "lg"Trigger size presetelevation"inset" | "section" | "elevated"Shadow + lift behaviorvariant"default" | "secondary" | …Trigger tone (use sparingly)SelectContent Props
PropTypeDescription
shadow"sm" | "md"Menu shadow strength (default: sm)position"item-aligned" | "popper"Radix positioning mode