Segmented Control

Import

import {SegmentedControl} from '@astryxdesign/core/SegmentedControl';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

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 ...

Important props

Theming targets

Best practices

• DoUse for switching between 2–5 mutually exclusive views or modes where all options should be visible.
• DoProvide a descriptive label for the control to ensure the group is accessible to screen readers.
• Do notUse for page-level navigation; use TabList instead. TabList is a navigation component, while SegmentedControl is an input that always has exactly one selected option.
• Do notUse 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.