Segmented Control

A segmented control is a compact row of two to four mutually exclusive options with one always selected. Monthly and annual. List, board and calendar. Day, week and month.

The distinction that decides when to use it: it changes how a view is presented, not what the view contains. That is what separates it from tabs, which swap the content itself.

Against its neighbours

The toggle confusion is worth naming. Monthly versus annual billing is two peers; rendering it as a toggle implies one is the default and the other is a deviation, which misrepresents a pricing choice as a setting. Two segments read as equals, which is what they are.

Where it fits

Pricing pages. Monthly and annual, with the saving stated on the annual option. This is close to a convention.

View modes. List, board, calendar, timeline. The content is identical; the arrangement is not.

Time ranges. Day, week, month, quarter — where the range is short and fixed. Past four, a dropdown.

Density. Comfortable and compact in a data-heavy tool, though this is often better as a remembered preference than a visible control.

Where it does not fit: anything with five or more options, anything with labels of wildly different lengths, and anything that is genuinely a decision to be submitted rather than a view to be switched.

Details that matter

Equal-width segments where labels allow, otherwise sized to content. A row where one segment is three times another reads as unbalanced and makes the selected state harder to see.

The selected state must be unmistakable. This control is small, and a subtle selected state on a small control is an ambiguous control. Background fill rather than a border change.

Never render it disabled with no selection. Something is always chosen; an empty segmented control is a broken one.

It is a radio group underneath. Arrow keys move within it, Tab moves past it, and assistive technology should hear a group with one selected option. Building it from styled divs loses all of that.

Labels stay short. One or two words. A segment that needs five words wanted a dropdown.

In practice

A pricing page presents monthly and annual billing as a toggle, labelled "Annual billing" with a switch.

It converts poorly to annual, and support hears a recurring question: whether the price shown is with or without the discount. The toggle implies monthly is the product and annual is an option applied to it, so people read the default price as the real one and the switch as a modifier they have not fully understood.

Replacing it with two equal segments — Monthly, Annual — and putting "Save 20%" on the annual segment changes how the choice reads. Two prices, two peers, one visibly better.

The underlying offer never changed. The control had been describing a relationship between the options that did not exist.

Where teams get it wrong

• Using it where tabs belong. Different content, not a different view of the same content.
• A toggle for two peers. One option framed as a deviation from the other.
• Five or more segments. A squeezed row nobody can read.
• A subtle selected state. Ambiguity on the control least able to afford it.
• Divs instead of a radio group. No keyboard, no announcement.