Balance Logo
Reckon Design System
Open playroom

Segmented Control

A horizontal control made of multiple segments.
pnpm add @balance-web/segmented-control
Import usage
import {
} from '@balance-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.

Edit in Playroom


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

Copyright © 2023 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo