Segmented Control
ProA pill-shaped toggle for switching between 2–4 mutually exclusive options. Used for view switching (Grid/List), density controls (Compact/Default), and filter toggles. Not a form input — use Radio for form submissions.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| 2-segment | ||
| 3-segment | ||
| 4-segment |
Usage Guidelines
Do
Use for switching between views or display modes.
Don't
Use for form field selection — use Radio buttons instead.
Do
Limit to 4 options maximum.
Don't
Exceed 4 segments — use Tabs for more options.
Do
Make the active segment visually distinct with a sliding indicator.
Don't
Mix with Tab navigation in the same context.
Code
Design Tokens
Accessibility
- Uses role="radiogroup" with individual role="radio" items.
- Active item has aria-checked="true".
- Arrow keys navigate between options; selection is immediate.