Segmented control
A pill split into a few exclusive options with exactly one always selected. The iOS-style Day / Week / Month switcher.
See it
What it is
A segmented control is a single pill divided into two to five mutually exclusive segments, with exactly one always selected. It is a radio group wearing a nicer coat: Apple shipped it as 'UISegmentedControl' and the shape stuck, so people read it instantly as 'pick one of these views'. Think Day / Week / Month on a calendar, or Light / Dark / System in settings.
Reach for it when the options are few, short, parallel, and change what you are looking at rather than doing something. Tabs own the same job at page scale, so use a segmented control for the smaller, inline decision: filtering a list, flipping a chart's unit, switching a card's mode. The selected segment usually gets a raised or filled 'thumb' that slides between positions, which is the detail that makes it feel native.
Gotchas: it has no empty state, so there is no way to express 'none selected', and segments never fire actions like Save or Delete. Width is set by the longest label, so wildly uneven labels look broken, and past about five segments the text goes unreadable on phones (use a select or tabs instead). For screen readers, wire it as a radio group or a tablist, not a row of plain buttons.
Ask AI for it
Build a segmented control: one rounded pill container with a subtle inset grey background, holding 3 equal-width segments labelled Day, Week, Month. Exactly one is always selected, shown by a white raised 'thumb' with a soft shadow and rounded corners that animates its position between segments over about 200ms with a spring-like ease. Unselected labels are muted grey, the selected label is full contrast. Implement it as an accessible radio group (role='radiogroup' with arrow-key navigation), keep all segments the same width, and add a visible focus ring.