Select

The Select component allows users to choose from a dropdown list of options. It supports label, size variations, disabled state, error feedback, and a custom icon for the dropdown.

Default

The select input with a label, full width and a chevron down icon to the right.

Choose an option

<Select label="Choose an option" value="option1" onChange={handleChange}>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

Sizes

Different sizes of the select input with small and default sizes.

Choose a small option

Choose a default option

<Select width="inline" label="Choose a small option" size="small" value="option1" onChange={handleChange}>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

Disabled

The select input in a disabled state.

Disabled select

<Select label="Disabled select" disabled value="option1" onChange={handleChange}>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

Error

The select input in an error state with feedback.

Error select

This field is required

<Select label="Error select" error="This field is required" value="option1" onChange={handleChange}>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

Accessibility

The select input is accessible via the aria-labelledby and aria-describedby attributes to support screen readers.