Segmented control
Spec
One choice from a small set, built as a radio group: one Tab stop, arrow keys move and select. Icon or text labels. Figma component "Segmented control" (22-4373). Moved here from Patterns on Oct 10.
Anatomy
- Outline border-control, radius-full, 2px inner padding.
- Selected option: surface-selected with text-inverse, bold.
- Unselected: surface with text-primary.
- Icon labels need accessible names ("Deposit", "Withdrawal"); the group needs a label ("Type").
States
- Hover and pressed apply only to unselected options: surface-accent-subtle, then surface-action-pressed with text-inverse.
- The selected option changes only for focus and disabled.
- Focus: 2px border-focus ring, 2px offset, around the focused option.
- Disabled: surface-disabled with text-disabled; the chosen value stays readable.
Where it's used
- Type (Withdrawal/Deposit) in the entry row and the phone dialog, with a caption naming the choice.
- Appearance (System, Light, Dark) in the profile sheet. The profile menu uses menu items with a ✓ instead, since a radio group can't sit inside a menu.
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.0.0, Sep 30 2026: Moved here from Patterns on Oct 10. Figma 22-4373: icons or text, radio group.