Balance Logo
Balance
Reckon Design System
Open playroom

Segmented Control

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

Usage

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

Block

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