#SegmentedControl

Switches between renditions of the same content, with every option visible — reach for Tabs when the sections are distinct places rather than views of one thing, and Radio when the choice is an answer a form submits. It owns no panel: it reports the chosen value and you re-render the content yourself.

Source · Storybook

#Usage

import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { SegmentedControl, SegmentedControlItem } from '@wallarm-org/design-system/SegmentedControl';

#Examples

#Disabled

A disabled option stays visible rather than disappearing, so the set of choices doesn't change shape between visits.

#Icons

Icons beside the labels, which helps when the options are renditions — a list against a grid — rather than categories.

#Icon only

Icon-only segments for a toolbar. Each still needs an accessible name; the icon is the label only visually.

#More button

An overflow trigger for the options that didn't fit. If you need this often, the choice probably wants a Select.

#Many

What too many options looks like — worth seeing so the limit is a judgement rather than a rule you took on trust.

#Badge

A count on a segment, for when each view holds a different number of things and the reader would otherwise have to switch to find out.

#Full width

Stretches to its container, dividing the width evenly. Suits a narrow panel; in a wide one it leaves the segments floating far apart.

#Controlled

Own the value when something else has to move with it, which is the usual case, since the control renders no panel of its own.

#Form field

Inside Field, for when the choice really is a form answer — the case where Radio is often the better call.

#Props

#SegmentedControlButton

#SegmentedControlItem

#SegmentedControlSeparator

#Explorer