atom

Select

A dropdown select component for choosing from a list of options. Supports labels, helper text, error states, and density variants.

Overview

The Select component provides a native dropdown experience with consistent styling. It supports labels, placeholder text, helper text, error states, and density variants matching the Input component pattern.

Props

Prop Type Default Description
options SelectOption[] - Array of options with value and label (required)
placeholder string - Placeholder text when no value selected
label string - Label text above the select
helperText string - Helper text below the select
error string - Error message (replaces helper text)
density 'default' | 'compact' 'default' Controls padding density
required boolean false Whether the field is required
disabled boolean false Whether the select is disabled

SelectOption Type

interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
}

Variants

Density

Two density options to match different layouts — default for forms, compact for dense UIs. 

<Select options={options} density="default" placeholder="Default density" />
<Select options={options} density="compact" placeholder="Compact density" />

Examples

With Label

 
<Select
  label="Country"
  options={countryOptions}
  placeholder="Select your country"
/>

Required Field

 
<Select
  label="Status"
  options={statusOptions}
  placeholder="Select status"
  required
/>

With Helper Text

This affects shipping options
 
<Select
  label="Region"
  options={countryOptions}
  placeholder="Choose a region"
  helperText="This affects shipping options"
/>

Error State

Please select a priority level
 
<Select
  label="Priority"
  options={statusOptions}
  placeholder="Select priority"
  error="Please select a priority level"
/>

Disabled State

 
<Select
  label="Category"
  options={statusOptions}
  placeholder="Cannot change"
  disabled
/>

Accessibility

  • Native Select: Uses the native <select> element for optimal accessibility and mobile experience.
  • Keyboard Support: Arrow keys navigate options, Enter or Space selects, Escape closes the dropdown.
  • Label Association: Labels are properly associated with the select via htmlFor.
  • Error Indication: Errors are linked via aria-describedby and announced by screen readers.

Best Practices

  • Always provide a descriptive label
  • Use meaningful option labels, not just values
  • Keep option lists reasonable in length (under 20 items)
  • For longer lists, consider a searchable dropdown component