component
Segmented control
also called content switcher (carbon), segmented button (material)
A single control holding two to five mutually exclusive options side by side, with the current one shown as a filled segment.
This is the poster child for knowing the word. Describe it and you get five different components; say “segmented control” and you get the thing you meant, in one step, from a person or from an agent.
Its job is a small, closed set of exclusive choices where seeing the alternatives is part of the value: day, week, month; list or grid; all, active, archived. Past about five options the segments get too narrow to read and the control should become a dropdown.
Two neighbours. Tabs also show exclusive options, but tabs swap a region
of content and belong to it, while a segmented control usually filters or changes
the shape of content that is already there. A radio group is the
same logic in form clothing, used when the choice is being submitted rather than
applied instantly. Note that Radix ships this as ToggleGroup, which is worth
knowing when you are working in that codebase.
Which word?
| If you want | say |
|---|---|
| two to five exclusive options, all visible at once | segmented control |
| labelled panels in one region, one showing at a time | tabs |
| one of several, each option labelled and visible | radio group |
| several toggles that belong to one decision | toggle group |
| several actions that belong together visually | button group |
| one button that becomes the next action each time | morphing control |
| buttons under a search box that limit its reach | scope bar |
Related
See also: Sliding indicator · Model selector
Implementations
Specimens illustrate the concept; for production use, start here.
| hig | Segmented controls |
| material | Segmented buttons |
| radix | Toggle Group |