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.

Docs preview limitation: The bottom sheet picker does not open in this environment — it requires the native gesture and animation bridge (react-native-gesture-handler + react-native-reanimated) which is not available in the Vite build. The previews below show the trigger's visual states only. For the full interactive experience, see the component in Storybook or a running app.

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
accessibilityLabel string label Accessibility label for screen readers
testID string - Test ID for testing

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

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

Error State

<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

  • Accessibility Label: Uses the label prop as the default accessibility label. Can also manually set a custom accessibility label to announce to screen readers.
  • Accessibility State: Sets disabled when the select is non-interactive
  • Accessibility Hint: Shares either error or helperText as the accessibility hint. If both are provided, error takes precedence over helperText.

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