Segmented Control
A compact button group that lets users switch between a set of mutually exclusive views or modes.
When to use
- When users need to switch between a small set of related views or modes (2-5 options).
- When all options should be visible simultaneously without scrolling.
- For in-context toggles that immediately update the content below (e.g. chart type, calendar view).
When not to use
- Use diwa-radio-group for form fields where the choice is submitted with a form.
- Use diwa-tabs when switching between full page sections or panels with a URL.
- Use diwa-select when there are more than 5 options or limited horizontal space.
Dos and don'ts
Do
- ✓Keep labels short - one or two words per segment.
- ✓Ensure exactly one segment is always selected.
- ✓Use 2-5 segments for best usability.
Don't
- ✕Don't use for navigation that changes the URL - use tabs or links.
- ✕Don't use long labels that overflow the segment.
- ✕Don't use more than 5 segments in a single control.