Skip to main content

Select

Component
Live

The Select component allows users to make a single choice from a list of available options.

FigmaCode

Usage​

Select is a dropdown that presents a pre-defined list of options to users to make a single selection. Selects are available in full width plus 4 pre-defined sizes.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Select } from "@iag/chroma-react-ui.components";

When to use​

Use Select when there are more than 6 options for users to choose from. Consider Select as a last resort in public-facing services, due to its potential complexity for some users.

When to avoid​

Avoid using Select for fewer than 6 options. In this case consider the Radio or Segmented Control components.

Do

  • Do use simple labels for easy scanning.
  • Do provide help text for additional context where critical.
  • Do use informative error messages for easier correction.

Don't

  • Don't pre-select options in a Select field used for asking questions.

Sizes​

The Select component is resizable, defaulting to full width. It includes four sizes (1-4), with 1 being the smallest and 4 the largest.

Research​

Research shows that users can struggle with Selects. Instances include when users have been unable to close the select, tried to type into the select, tried to pinch zoom select options on smaller devices, and not understanding that they can scroll down to see more items. Due to this, consider is another component could be used instead of a Select.

References​