Select Primitive

Headless, unstyled select component with full keyboard navigation and ARIA support.

Features

  • Generic TValue support for type-safe values
  • Full keyboard navigation (Arrow keys, Home, End, Enter, Space, Escape)
  • Mouse hover integration with keyboard focus
  • Controlled and uncontrolled modes
  • ARIA attributes (role, aria-expanded, aria-activedescendant)
  • Click-outside to close
  • Item registration for navigation
  • Disabled state 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

Select<TValue>

Value - Currently selected value (controlled)

ValueChanged - Event callback when value changes

DefaultValue - Initial value (uncontrolled)

Open - Whether dropdown is open (controlled)

OpenChanged - Event callback when open state changes

Disabled - Whether select is disabled

SelectItem<TValue>

Value - Value this item represents (required)

TextValue - Optional display text override

Disabled - Whether this item is disabled

An unhandled error has occurred. Reload 🗙