Skip to main content

Segmented Control

Component
Live

The Segmented Control component presents mutually exclusive options horizontally.

FigmaCode

Usage​

The Segmented Control provides a visually distinct way to present 2-3 mutually exclusive options, from which only one selection can be made. The options are presented horizontally with the option to responsively stack on mobile devices for easier selection.

Installation​

Install

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

Import

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

When to use​

Use Segmented Control to reduce the vertical spacing of a page when you need to provide 2-3 mutually exclusive choices to users.

When to avoid​

Avoid using Segmented Control for more than three options, consider the Radio component instead. Also avoid when options are not mutually exclusive. In this case, consider the Checkbox component.

Do

  • Do provide at least 2 choices, no more than 3.
  • Do use simple labels for easy scanning.
  • Do keep labels to 1-2 words for clarity.
  • Do provide help text for additional context where critical.
  • Do use informative error messages for easier correction.