Segmented Control

Preview

A mutually exclusive switch between views of the same content, applied the moment it is picked. Default size, three segments. The specimen is live, so pick one.

The component exposes two properties, Size and Tabs. Every label reads Option because the label lives on a nested selector instance, and so do Active, Icon and Icon Swap, so a real control means reaching into each segment one at a time.

Every variant sets Icon off. Switching moves the pill with motion/duration/base, 200 ms on the standard curve.

How many segments can a Segmented Control hold?

Two to five segments in the same 340 track. The 4px padding never moves, so segments split the remaining 332 evenly; only their width changes. Five is the cap, the same as Tabs.

The track is pinned to 340 and each segment fills an equal share of the 332 left over: 166, 110.67, 83 and 66.4 wide.

A segment spends 12 of padding on each side, and 6 once there are five, so five leave 54.4 for the label.

How tall is a Segmented Control?

Two heights, 48 and 38. The segment carries the change: 40 tall at padding 8 and 12 becomes 30 at 6 and 12, label 16/24 to 14/20 at letter spacing .1. Track padding, gap and radius hold.

The track gets 48 and 38 once a 40 or a 30 segment sits inside 4 of padding. The icon, when you switch it on, is 16 square in both sizes, so at Small it takes a bigger share of a shorter segment.

Which states does Segmented Control have?

One state, held by exactly one segment. Active takes the bg/white-0 fill, dropShadow/xs and text/strong-950. Inactive carries no fill and drops to text/sub-700. There is no Pressed or Disabled variant in the file.

Set Active on exactly one segment. It lives on the nested selector, so a three segment variant carries three independent booleans and nothing stops all three being on at once.

Keep that rule in your code.

Properties

Two variant axes on the published component. The rest sit on the selector inside it, a building block not meant for direct use.

Segmented Control ships 8 variants, two sizes across four tab counts. The selector ships four, Active across Size.

Tokens

Every value the component reads, resolved through its aliases to the primitive underneath.

Radius is dimensions/radius/full on both track and segment. The active fill carries dropShadow/xs: 0 1px 2px at 4 percent over 0 4px 4px at 1 percent.

Accordion and Card reach for the same pair. In dark, bg/weak-50 lands on #242427 while the active segment lands on #0E0E0F, so the selected pill is darker than the groove holding it.

How does Segmented Control differ on iOS and Material 3?

iOS has its own Segmented Control, wider and in two other heights. The Material 3 page of the file has no segmented control. Appetite UI Segmented Control is one component with a 340 wide track.

The minimum touch target is 44 pt on iOS and 48 dp on Material 3, set by platform/min-touch-target in the Platform collection.

Default clears 44 pt. Small is 38 high, so give it 44 pt of hit area in code.

When should I use Segmented Control instead of Tabs?

Use Segmented Control when the switch belongs to a setting and Tabs when it belongs to the content below it.

Both cap at five segments. Segmented Control is a pill in a groove and applies on pick, and Tabs is an underline with no track.

They do the same job in opposite chrome, so pick one per screen.