Atom

Select

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

Overview

The Select component provides a native dropdown experience with consistent styling. It supports labels, placeholder text, helper text, error states, and multiple sizes.

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)
size 'sm' | 'md' | 'lg' 'md' Size variant
required boolean false Whether the field is required
disabled boolean false Whether the select is disabled
startIcon ReactNode - Icon displayed on the left side

SelectOption Type

interface SelectOption {
  value: string;
  label: string;
}

Variants

Sizes

Three size options to match different form layouts.

 
<Select options={options} size="sm" placeholder="Small" />
<Select options={options} size="md" placeholder="Medium" />
<Select options={options} size="lg" placeholder="Large" />

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