Select

A dropdown select component for choosing from a list of options.

Beer Style
Brewery Location 
<div className="max-w-lg space-y-6">
  <Field>
    <FieldLabel>Beer Style</FieldLabel>
    <Select items={[
      { value: 'ipa', label: 'IPA' },
      { value: 'stout', label: 'Stout' },
      { value: 'porter', label: 'Porter' },
      { value: 'lager', label: 'Lager' },
      { value: 'pilsner', label: 'Pilsner' },
      { value: 'wheat', label: 'Wheat Beer' },
      { value: 'saison', label: 'Saison' },
    ]} defaultValue="ipa" />
  </Field>
  <Field>
    <FieldLabel>Brewery Location</FieldLabel>
    <Select items={[
      { value: 'portland', label: 'Portland, OR' },
      { value: 'denver', label: 'Denver, CO' },
      { value: 'asheville', label: 'Asheville, NC' },
      { value: 'san-diego', label: 'San Diego, CA' },
    ]} />
  </Field>
</div>

Overview

The Select component provides a dropdown menu for choosing from a list of options. It extends the native HTML select element with consistent styling and theming, working seamlessly within the Field component for labels and error handling.

Basic Usage

Description

Select can be used with or without labels, and supports all standard select states including disabled and error.

With Label
With Error
Disabled
With Default Value 
<div className="space-y-6 max-w-sm">
  <Field>
    <Select items={beerStyles} placeholder="Unlabeled select" />
  </Field>

  <Field>
    <FieldLabel>With Label</FieldLabel>
    <Select items={beerStyles} placeholder="Choose a beer style..." />
  </Field>
  
  <Field>
    <FieldLabel>With Error</FieldLabel>
    <Select items={beerStyles} aria-invalid={true} placeholder="This field has an error" />
  </Field>
  
  <Field>
    <FieldLabel>Disabled</FieldLabel>
    <Select items={beerStyles} disabled defaultValue="stout" />
  </Field>
  
  <Field>
    <FieldLabel>With Default Value</FieldLabel>
    <Select items={beerStyles} defaultValue="pilsner" />
  </Field>
</div>

Props

The Select component accepts the following props:

PropTypeDefaultDescription
itemsSelectItemProp[][]Array of options with value and label properties
placeholderstring-Placeholder text when no option is selected
align’start’ | ‘center’ | ‘end''start’Alignment of the dropdown menu
alignOffsetnumber0Offset for the dropdown menu alignment
defaultValueunknown-Initial selected value (uncontrolled)
valueunknown-Controlled selected value
disabledbooleanfalseDisables the select
aria-invalidbooleanfalseIndicates validation error state
classNamestring-Additional CSS class names

SelectItemProp Type

type SelectItemProp = {
    value: unknown;
    label: ReactNode;
};

Additional Features

  • Validation States: Use aria-invalid to show error styling
  • Focus States: Automatic focus ring styling matching other form components
  • Dark Mode: Fully themed with CSS custom properties
  • Keyboard Navigation: Full keyboard support for accessibility
  • Custom Options: Can use children to render custom option components

Usage Notes

  • The items prop accepts an array of objects with value and label properties
  • Values can be strings, numbers, arrays, or objects
  • The dropdown automatically matches the width of the trigger
  • Use align and alignOffset to position the dropdown menu