Segmented Control

Open the Calendar app on an iPhone and look at the top: Day · Week · Month · Year. Tap one and the view below changes. That small bar of connected buttons is a segmented controlSegmented controlA row of connected buttons where exactly one option is selected at a time.Open in glossary →, and you’ll find it in almost every app: maps, banking, fitness, shopping filters.

It looks simple, and that’s exactly why bugs slip through. Let’s learn it properly.

What is a segmented control?

A segmented control is a horizontal set of 2–5 options shown as one connected control. The options are mutually exclusiveMutually exclusiveOptions where choosing one automatically means the others can't be chosen.Open in glossary →, so selecting one deselects the others. Think of it as radio buttons dressed up as a single button bar.

You’ll usually see it used to:

• Switch between views of the same content: List / Map in a restaurant app, Day / Week / Month in a calendar.
• Filter content: All / Unread in a mail app, Income / Expenses in a banking app.
• Pick a setting with a few options: Walk / Transit / Drive in a maps app.

Anatomy

How it differs from similar components

Beginners often mix these up. Knowing the differences helps you spot when the wrong component was used, and that’s a valid finding too.

Component	Choices	Selection	Typical use
Segmented control	2–5, short labels	Exactly one	Switch views or filter, right where the content is
Tabs	2–7+	Exactly one	Navigate between different sections or screens
Radio buttons	~2–6	Exactly one	Forms, especially with long labels or descriptions
Toggle switch	1 (on/off)	On or off	A setting that takes effect immediately
Dropdown	Many	One (or more)	Saving space when there are 5+ options
Chips	Any	One or many	Filters, tags, multiple selection

Dev note

Apple calls it a segmented control. Google’s Material Design calls it a segmented button. On the web it’s often called a button group or toggle group. In bug reports, use the name your team uses.

Designs & variants

The same idea looks different on every platform. Each variant comes with its own risks.

Tap the controls, they all work. Use the switch to compare light and dark appearance.

Dark

DayWeekMonthYear

WalkTransitDrive

MonthlyYearly

ListMapSaved

All24Unread3Flagged0

StandardExpressSame day

When to use it

A segmented control is a good choice when:

• There are 2 to 5 options, and all of them fit with short labels (1–2 words).
• The options are related and mutually exclusive: you can only look at one time range at a time.
• The user will switch often and wants to see all options at once.
• The change applies immediately to content on the same screen, with no “Save” button.

Good and bad uses

Common bugs

These are the bugs testers report most often for segmented controls. Learn the patterns and you’ll spot them in seconds.

#	Bug	What you see	Typical severity
1	No default selection	The screen loads with no segment highlighted, or the highlighted one doesn’t match the content	Medium
2	Content doesn’t match selection	“Day” is selected but the chart shows yearly data, often after fast tapping	High
3	State is lost	Selection jumps back to the first segment after rotating, going back or returning from the background	Medium
4	Label truncation	“Mon…” or clipped text in other languages or with large text	Medium
5	Invisible selection	In dark mode or high contrast, you can’t tell which segment is active	Medium–High
6	Double requests	Tapping the selected segment again reloads data; fast taps fire many API calls	Low–Medium
7	Tiny touch targets	Segments smaller than 44 pt (iOS) / 48 dp (Android) are hard to hit and you tap the wrong one	Medium
8	Screen reader silence	VoiceOver or TalkBack doesn’t say which segment is selected, or reads “button, button”	High (for affected users)
9	Disabled segment still works	A greyed-out option can still be tapped or selected with the keyboard	Medium
10	Animation glitches	The thumb lands between segments or flickers when you switch quickly	Low

Stress-test it

Good testers don’t stop at “it works”. They push the component to its limits. Try a German translation, a narrow screen and 160% text size:

🧪 Stress-test playground

Testers break components by pushing them to extremes. Change the settings and watch what happens.

Segments: 4LanguageEnglishGermanSerbianFinnishScreen width: 320pxText size: 100%Style

iOSmaterialweb

Dark mode

DayWeekMonthYear

Showing: Day

Looks good. Now try German, a narrow screen, or 160% text size.

Find the bug

Time to practice. The fitness app below has a segmented control with six bugs. Explore it the way a real tester would:

• Tap segments slowly, then quickly.
• Open an activity and come back.
• Change the device settings.
• Watch the network log.

🐞 Bug hunt: Activity screen

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

Activity

DayWeekMonthYear

Steps this week

48,210

Recent

Morning walk2.1 km · 28 minEvening run5.2 km · 31 minCycling12.4 km · 45 min

Device settings

Restart app

Large textDark mode

Network log

• Tap a segment to see API requests…

1. 1

   Hint: Look carefully right after the app starts.

   No segment is selected on first load

   The chart shows week data, but no segment is highlighted. Expected: the segment that matches the content (Week) is selected by default.

   Reveal answer✓ I found this
2. 2

   Hint: Tap Year and then Day very quickly.

   Content does not match the selected segment (race condition)

   The slow range=year response arrives after the range=day response and overwrites it: Day is selected but the app shows yearly steps. Expected: only the latest request updates the screen.

   Reveal answer✓ I found this
3. 3

   Hint: Tap the same segment twice and watch the network log.

   Tapping the selected segment reloads the data

   Every tap on an already selected segment sends a new API request and shows a spinner. Expected: nothing happens, because the selection did not change.

   Reveal answer✓ I found this
4. 4

   Hint: Select Month, open an activity, then go back.

   Selection resets after navigating back

   The control jumps back to Day. Expected: the user’s choice (Month) is kept. This is a state persistence bug.

   Reveal answer✓ I found this
5. 5

   Hint: Turn on Large text.

   Labels are clipped with large text

   Labels are cut off mid-letter with no ellipsis, so "Month" becomes unreadable. Expected: labels fit, wrap, or the layout adapts for accessibility text sizes.

   Reveal answer✓ I found this
6. 6

   Hint: Turn on Dark mode.

   Selected segment is invisible in dark mode

   The selection thumb has the same color as the track, so you can’t tell which option is active. Expected: clear contrast between selected and unselected segments in both themes.

   Reveal answer✓ I found this

How to test it

Checklist

Segmented control test checklist

0 of 12 checked

Copy

• Exactly one segment is selected on first load, and it matches the content shown
• Tapping each segment selects it and updates the content below
• Tapping the already selected segment does nothing (no reload, no flicker)
• Quick repeated taps never leave content and selection out of sync
• Selection is kept after rotation, going back, and returning from background
• Disabled segments look disabled and cannot be selected (touch or keyboard)
• Labels fit in every supported language and at the largest text size
• Selected state is clearly visible in light mode, dark mode and high contrast
• Each segment is at least 44×44 pt (iOS) / 48×48 dp (Android)
• Screen reader announces the label, position (e.g. 2 of 4) and selected state
• Web: arrow keys move the selection and the focus ring is visible
• Behavior is correct on slow and offline networks (loading and error states)

Example test cases

Accessibility

A segmented control has to work for people who can’t see the screen, use large text, or navigate with a keyboard. Check these:

• Screen readers (VoiceOver / TalkBackScreen readerSoftware that reads the screen aloud for blind and low-vision users, like VoiceOver or TalkBack.Open in glossary →) must announce each segment’s label, position (“2 of 4”) and whether it’s selected.
  Dev note

  On the web, that means role="radiogroup" with role="radio" and aria-checked on each segment, or aria-pressed for toggle buttons.
• Icon-only segments need a text label for assistive tech. Otherwise users just hear “button”.
  Dev note

  accessibilityLabel / aria-label.
• Don’t rely on color alone. The selected segment should differ in more than hue: a thumb, a checkmark or bolder text.
• Contrast: text needs at least 4.5:1 contrast with its background, and the selection indicator at least 3:1.
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: at least 44×44 pt on iOS and 48×48 dp on Android. On the web, WCAG 2.5.8 (AA) asks for at least 24×24 CSS px; 44×44 px (2.5.5, AAA) is the comfortable target.
• Keyboard (web): Tab moves focus into the group (onto the selected segment), and arrow keys move between segments. In the radiogroup pattern the arrow keys also select, just like radio buttons; with toggle buttons, each segment is its own Tab stop and Space or Enter selects it.

Mobile vs web

iOSAndroidWeb

Dev note

Native component: UISegmentedControl (UIKit) or Picker with .segmented style (SwiftUI).

• Always single selection. The selected segment sits on a sliding thumb; its exact look differs between iOS versions and between light and dark mode.
• Supports Dynamic Type, so test at the largest accessibility sizes.
• Common in navigation bars and toolbars, and under large titles.

• Material 3 calls it a segmented button: an outlined pill with a checkmark on selected items. In the 2025 Material 3 Expressive update it is being replaced by the connected button group, which works the same way with a new look.
• Can be single or multi-select, so read the requirements carefully.
• Material’s guidelines suggest 2–5 segments.
• Test with font scale and display size settings, plus TalkBack.

• Usually custom-built (HTML buttons + CSS) or from a UI library, so quality varies a lot.
• Check keyboard navigation, focus styles and ARIA roles in DevTools.
• Test responsive widths: does it shrink, wrap, or overflow on mobile browsers?
• Test across browsers (Chrome, Safari, Firefox), because CSS differences can break the layout.

Check your understanding

Quick quiz

0/4 answered · 0 correct

1. 1.Which situation is the best fit for a segmented control?

   AChoosing a country from 195 optionsBSwitching a restaurant list between List and Map viewCButtons for Save, Share and DeleteDTurning notifications on or off

2. 2.You tap "Year" then "Day" quickly. "Day" stays selected but the chart shows yearly data. What is the most likely cause?

   AA localization bugBA race condition between API responsesCA missing touch targetDA dark mode bug

3. 3.What should a screen reader announce when focusing a segment?

   AOnly "button"BThe label onlyCLabel, selected state and position, e.g. "Week, selected, 2 of 4"DNothing, segments are decorative

4. 4.Which test is MOST likely to reveal a truncation bug?

   ASwitching to a German translation with large textBTapping each segment onceCTesting on Wi-FiDChecking the app icon

Key takeaways

• A segmented control offers 2–5 short, mutually exclusive options that change content immediately.
• Use something else for actions, long labels, on/off settings, many options or multi-select (except Material’s multi-select variant).
• The classic bugs: no default selection, content out of sync, lost state, truncation, invisible selection, and double requests.
• Always test fast tapping, navigation and rotation, languages and large text, dark mode, and screen readers.