Select

Dropdown selector with keyboard navigation and optional search.

Basic Select

Simple dropdown select

With Label

Select with label text

Searchable

Select with search functionality

With Helper Text

Select with helper message

Select the priority level for this task

Error State

Select showing error

This field is required

Disabled State

Disabled select

With Disabled Options

Select with some disabled options

Enterprise requires contacting sales
PropTypeDefaultDescription
optionsSelectOption[][]Array of options with value and label
valuestringundefinedCurrently selected value
placeholderstring'Select...'Placeholder text when no value is selected
onChange(value: string) => voidundefinedCallback when value changes
searchablebooleanfalseWhether to show search input
labelstringundefinedLabel text for the select
errorbooleanfalseError state
helperTextstringundefinedHelper text below select
disabledbooleanfalseDisabled state

check_circleWhen to use

  • Use when there are 5+ options to choose from
  • Use searchable variant for long lists (10+ options)
  • Provide clear labels that describe the selection

cancelWhen not to use

  • Don't use for 2-3 options (use radio buttons instead)
  • Don't use for multi-select (use checkboxes)
  • Don't hide important options that users need to see at once