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

This component has been deprecated. Below are its use cases and alternatives. If you see designs using SegmentedControl, ask for them to be updated.

  • Used for filtering: Use FilterChipRadioGroup
  • Used to toggle form sections based on user input: Use RadioButtonGroup
  • Used for navigation: Use Tabs

This component will be deprecated when we have an alternative for the navigation use case of this component.


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 © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo