Balance Logo
Reckon Design System

Segmented Control

A horizontal control made of multiple segments.
pnpm add @reckon-web/segmented-control
Import usage
import {
} from '@reckon-web/segmented-control';
  • Code
  • API


A segmented control is often used to switch between views of some data.

Use a segmented control only when the options are predefined and are at most five options. If you need to present a lot of options to the user, consider using another component such as SelectField.

Open in Playroom


Set the block property to fill the available width of the element that contains the segmented control.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.