Form fields and toolbar selects default to a custom portaled listbox (themed panel, checkmarks, keyboard navigation). Pass variant="native" for a styled <select>.
Form field (default)
Placeholder
With value
Required & hint
Urgent is reserved for on-call incidents.
Error
Select a region to continue.
Disabled
With icons — controlled value
With icons — default value
Native
Placeholder
With value
Embedded (toolbar)
Embedded native
Loading
Loading field
Animation variants
animationVariant — click each control to compare press feedback.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme for the field group. |
| mode | Optional | "light" | "dark" | light | Color mode — swaps token palette for light or dark surfaces. |
| variant | Optional | "native" | "custom" | custom | Custom portaled listbox (default). Pass variant="native" for a styled `<select>` when you need native form semantics. |
| options | Optional | SelectOption[] | — | List of { value, label, disabled?, icon? }. |
| value / defaultValue / onChange / onValueChange | Optional | string handlers | — | Standard form wiring — onChange works for both variants; onValueChange is custom-only shorthand. |
| placeholder | Optional | string | — | Empty-state label (native: disabled first option; custom: muted trigger text). |
| embedded | Optional | boolean | false | Borderless compact control for toolbars and segmented shells. |
| SelectSkeleton | Optional | component | — | Colocated loading preset — label, control, optional hint bars. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation — default, none, ripple, scale, sink, lift, pulse, or glow. |
| enterAnimationVariant | Optional | EnterAnimationVariant | default | Listbox panel enter/exit — default and spring use fluid spring physics; zoom, subtle, fade, slide-*, scale, or none. |