Select
Select Primitive
Headless, unstyled select component with full keyboard navigation and ARIA support.
Features
Core capabilities of the select primitive.
Capabilities
Generic
TValue, keyboard navigation, controlled/uncontrolled modes, ARIA attributes, click-outside close, and disabled support.Basic Example
Minimal unstyled primitive (add your own styles).
Controlled Example
Parent component controls the selected value.
Current value: null
Disabled State
Select with disabled state.
Keyboard Navigation
Full keyboard support with all standard keys.
↑ ↓ Navigate items
Home End First/Last item
Enter Space Select item
Esc Close dropdown
Tab Close and move focus
API Reference
Component properties and parameters.
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | TValue? | — | Currently selected value (controlled). |
| ValueChanged | EventCallback<TValue> | — | Callback when value changes. |
| DefaultValue | TValue? | — | Initial value (uncontrolled). |
| Open | bool? | — | Whether dropdown is open (controlled). |
| OpenChanged | EventCallback<bool> | — | Callback when open state changes. |
| Disabled | bool | false | Whether the select is disabled. |
| Item.Value | TValue | — | Value represented by this item (required). |
| Item.TextValue | string? | — | Optional display text override. |
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use Select Primitive
- ✓Building a custom design system
- ✓Need complete control over styling
- ✓Want to apply your own CSS framework
- ✓Creating unique visual designs
Use Styled Component
- ●Want shadcn/ui design out of the box
- ●Need quick implementation
- ●Like the default styling
- ●Prefer convention over configuration