Segmented control

In context

Try it

Purpose

Segmented control lets a user flip between two or three views of the same screen without navigating away. It keeps the choice visible and reversible — one tap there, one tap back — which suits a low-literacy user who's exploring rather than committing.

Anatomy

• Track — a rounded pill that holds the segments on a quiet surface.
• Segments — equal-width options; each is at least a 44dp tap target.
• Selection — the active segment sits on a white pill (a soft lift); its label goes bold. The rest stay quiet.

Code

import { SegmentedControl } from '@daytwo/components'

const [period, setPeriod] = useState('today')

<SegmentedControl
options={[
  { value: 'today', label: 'Today' },
  { value: 'week', label: 'This week' },
]}
value={period}
onChange={setPeriod}
/>

For Burmese labels, pass fontFamily (the Noto Sans Myanmar family) so the labels render in the right script.

When to use

• To switch between 2–3 views of one screen (a time range, a filter, two tabs of content).
• When both options are peers and the user benefits from seeing them side by side.

When NOT to use

• To navigate between screens — that's a tab bar or links, not a segmented control. A segmented control implies "same screen, different slice."
• For more than ~3 options — segments get cramped and labels truncate; use a list, dropdown, or filter chips instead.
• For an on/off setting — use a switch.

The correct scenario

The home screen shows "Today" and "This week" as two segments above the day's number. Tapping "This week" swaps the metric in place — the owner compares the two periods in a second, without leaving home or losing their place.

Anti-patterns

Edge cases

Tokens used