--- title: "Segmented control UI: variants and examples | Kombai" description: "A segmented control is a row of joined buttons with one selected, used to switch a view, a mode or a value in place." canonical_url: https://kombai.com/glossary/segmented-control/ author: "The Kombai Team" --- # Segmented control A segmented control is a row of joined buttons with one selected, used to switch a view, a mode or a value in place. - Also called: segmented button, button group - Platforms: Web, Mobile - In the Kombai gallery: [55 web designs](https://kombai.com/gallery/web/segmented-control/), [35 mobile designs](https://kombai.com/gallery/mobile/segmented-control/) - [Almadine](https://kombai.com/gallery/inspirations/segmented-control-ios-21/) (Mobile) - [Kirkhaven](https://kombai.com/gallery/inspirations/segmented-control-web-51/) (Web) - [Alderwick](https://kombai.com/gallery/inspirations/segmented-control-ios-34/) (Mobile) ## What is a segmented control? A segmented control groups two to five related options into one bar of equal segments. Exactly one segment is selected at a time, and picking another changes the view or the value right away, without leaving the screen. - The selected segment is filled or raised, and the rest stay flat. - Labels are short nouns or icons, not a mix of both in one control. ## When to use segmented control - **Switching views.** List, map or calendar views of the same results. - **Picking a range or mode.** Week, month or year above a chart, or day, night and auto. - **A quick either-or.** One way or return, monthly or annual, at the top of a form. ## When not to use one - **Separate sections.** For whole areas of an app, use tabs or a tab bar. - **More than five options.** On a phone, past about five segments, use a dropdown. - **Several selections.** If people pick more than one, use checkboxes or filter chips. ## Anatomy 1. **Track**: Holds the segments together 2. **Segment**: One option, equal in width 3. **Selection**: Marks the current segment 4. **Label**: A short noun 5. **States**: Selected, disabled, focus ## Variants We sorted every segmented control design in the Kombai gallery and found six patterns. ### 1. Two-way switches The default. Two labels in a pill track, like Payments and Scheduled, with the current view raised or filled. - [Cobblewood](https://kombai.com/gallery/inspirations/segmented-control-ios-9/) (Mobile) - [Cantara](https://kombai.com/gallery/inspirations/segmented-control-ios-6/) (Mobile) - [Junipero](https://kombai.com/gallery/inspirations/segmented-control-ios-28/) (Mobile) ### 2. Icon segments Icons, alone or with a word, stand for each view, like list, gallery and map, or one sport per segment. - [Wrenfield](https://kombai.com/gallery/inspirations/segmented-control-ios-16/) (Mobile) - [Wyverne](https://kombai.com/gallery/inspirations/segmented-control-ios-29/) (Mobile) - [Feldspar](https://kombai.com/gallery/inspirations/segmented-control-ios-33/) (Mobile) ### 3. Time ranges Short ranges like 1D, 1W and 1M, or daily and weekly, above a chart that redraws for each one. - [Alderwyn Markets](https://kombai.com/gallery/inspirations/segmented-control-web-1/) (Web) - [Pallasco](https://kombai.com/gallery/inspirations/segmented-control-web-23/) (Web) - [Amberlyn](https://kombai.com/gallery/inspirations/segmented-control-ios-32/) (Mobile) ### 4. Plan toggles Monthly or annual billing, or one segment per plan tier, above prices that change with the choice. - [Pellworth](https://kombai.com/gallery/inspirations/segmented-control-web-54/) (Web) - [Glasswing](https://kombai.com/gallery/inspirations/segmented-control-web-9/) (Web) - [Halvora](https://kombai.com/gallery/inspirations/segmented-control-ios-5/) (Mobile) ### 5. Settings segments Three or four modes in a settings row, like Day, Night and Auto, or Daily, Weekly and Off. - [Tanager](https://kombai.com/gallery/inspirations/segmented-control-ios-25/) (Mobile) - [Pillarbrook](https://kombai.com/gallery/inspirations/segmented-control-web-38/) (Web) - [Bramblewick](https://kombai.com/gallery/inspirations/segmented-control-web-3/) (Web) ### 6. Inspector groups Joined buttons in an editor panel for sizes, alignment or compression, one group per property. - [Thornbury](https://kombai.com/gallery/inspirations/segmented-control-web-55/) (Web) - [Dorneval](https://kombai.com/gallery/inspirations/segmented-control-web-12/) (Web) - [Mossgate](https://kombai.com/gallery/inspirations/segmented-control-web-18/) (Web) ## Where segmented controls show up ### Booking and forms An either-or at the top of a form that changes the fields below, like one way or return. - [Rookery](https://kombai.com/gallery/inspirations/segmented-control-ios-31/) (Mobile) - [Bramblewick](https://kombai.com/gallery/inspirations/segmented-control-ios-22/) (Mobile) - [Dunwater](https://kombai.com/gallery/inspirations/segmented-control-web-43/) (Web) ### Sending and sharing How something goes out: by text or email, or as a link or a message. - [Wexford](https://kombai.com/gallery/inspirations/segmented-control-ios-14/) (Mobile) - [Ironvale](https://kombai.com/gallery/inspirations/segmented-control-web-28/) (Web) - [Novareef](https://kombai.com/gallery/inspirations/segmented-control-web-8/) (Web) ### Payments and money Scan or show a pay code, split a deposit by percent or amount, or go long or short. - [Thistledown](https://kombai.com/gallery/inspirations/segmented-control-ios-4/) (Mobile) - [Ferrowind](https://kombai.com/gallery/inspirations/segmented-control-ios-19/) (Mobile) - [Ketterling](https://kombai.com/gallery/inspirations/segmented-control-ios-18/) (Mobile) ## Segmented control vs similar components | | [Segmented control](https://kombai.com/glossary/segmented-control/) | [Tabs](https://kombai.com/glossary/tabs/) | [Radio button](https://kombai.com/glossary/radio-button/) | [Toggle switch](https://kombai.com/glossary/toggle-switch/) | |---|---|---|---|---| | Switches | A view, mode or value | Between content panels | A value in a form | One setting on or off | | Options | 2 to 5, short labels | Several, can scroll | Any short list | Exactly two | | Best for | Compact view and mode switches | Sections of a page | Form answers people compare | Settings that apply instantly | ## Build notes - When it picks a value, build it as a radio group: role="radiogroup" around role="radio" segments. - When each segment swaps a panel of content, use the tabs pattern with role="tablist" and role="tab". - The control is one tab stop. Arrow keys move the selection and wrap at the ends. - Keep segments equal in width, and use text or icons in one control, not both. - Give icon-only segments a name, like aria-label="Map view". - Mark the selection with fill or contrast, not with color alone. ## FAQ ### What is the difference between a segmented control and tabs? Both show one selected option. A segmented control changes a value or a view within the same content, like Week or Month on one chart. Tabs switch between separate panels of content, and Apple's guidelines point to a tab bar for moving between whole sections of an app. ### How many segments can a segmented control have? Apple's guidelines suggest no more than about five on iPhone, and about five to seven in a wide layout. Past that, labels get cramped and hard to scan, and a dropdown or tabs work better. ### Segmented control or radio buttons? Both pick one option. A segmented control is compact and usually applies right away, so it suits views and modes. Radio buttons stack with room for descriptions, so they suit form questions people read and compare. ### Can a segmented control use icons? Yes, for well-known views like list and grid. Apple's guidelines advise using either text or icons in one control, not a mix, and icon-only segments need an accessible name for screen readers. ## Related terms - [Tabs](https://kombai.com/glossary/tabs/) - [Radio button](https://kombai.com/glossary/radio-button/) - [Toggle switch](https://kombai.com/glossary/toggle-switch/) - [Filter chips](https://kombai.com/glossary/filter-chips/) ## References - [Apple Human Interface Guidelines: Segmented controls](https://developer.apple.com/design/human-interface-guidelines/segmented-controls) - [WAI-ARIA Authoring Practices: Radio group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) - [WAI-ARIA Authoring Practices: Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)