Segmented Control @astryx-svelte/core v0.3.0 · SegmentedControl
Usage
A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use for switching between 2–5 mutually exclusive views or modes where all options should be visible. |
| Do | Provide a descriptive label for the control to ensure the group is accessible to screen readers. |
| Don't | Use for page-level navigation; use TabList instead. TabList is a navigation component, while SegmentedControl is an input that always has exactly one selected option. |
| Don't | Use for simple on/off states; use ToggleButton instead. ToggleButton can be toggled on or off independently, while SegmentedControl enforces a single selection from a group. |
| Don't | Wrap a disabled SegmentedControl in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.SegmentedControl — Disabled Item
Segmented control with an individually disabled option for unavailable choices.
SegmentedControl — Fill Layout
Segmented control that stretches segments equally to fill the available width, useful for fixed-width containers.
SegmentedControl — Icon Only
Compact segmented control with hidden labels, showing only icons for space-constrained layouts.
SegmentedControl — With Icons
Segmented control with icon and label pairs for a view mode switcher.