Hex UIv0.1

Select

An accessible dropdown select for choosing one option from a list. Built on Radix UI Select with full keyboard navigation, typeahead, and RTL support.

With label

Grouped options (with separator)

With disabled option

Disabled

Installation

pnpm
pnpm dlx @hex-core/cli add select

API Reference

PropTypeDefaultDescription
value
string—[Select root prop] Controlled selected value
defaultValue
string—[Select root prop] Default selected value for uncontrolled usage
onValueChange
function—[Select root prop] Callback on value change: (value: string) => void
disabled
booleanfalse[Select root prop] Disable the entire select
required
booleanfalse[Select root prop] Mark as required for form validation
name
string—[Select root prop] Form field name (for native form submission)

AI Guidance

When to use

Use for choosing one option from a known, finite list (<= ~20 items): timezones, categories, roles, country codes. Pair with Label.

When not to use

Don't use for large searchable lists (use Combobox). Don't use for boolean choices (use Switch/Checkbox). Don't use for action menus (use DropdownMenu). Don't use for multi-select (needs a different component).

Common mistakes

  • Missing Label pairing
  • Forgetting SelectValue inside SelectTrigger
  • Using Select when the list is large (use Combobox)
  • Putting non-SelectItem children inside SelectContent

Accessibility

Full keyboard nav: arrow keys, Home, End, typeahead, Escape to close. Radix handles role='combobox' on trigger, role='listbox' on content, aria-selected on items.

Token budget: 800

Edit this page on GitHub