03 · Components · 선택
세그먼트 컨트롤Segmented Control
2~4개의 상호 배타적 뷰 모드를 전환. 화면 상단의 "리스트/그리드", "월/주/일" 같이 레이아웃이나 관점을 바꾸는 선택에 적합합니다.
StableWCAG AA
기본
현재 선택: grid
내부적으로 role="tablist"를 사용합니다. 반드시 aria-label을 제공해 그룹의 의미를 전달하세요.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
options* | { value: string; label: ReactNode }[] | 표시할 세그먼트 옵션들. | |
value* | string | 현재 선택된 값. | |
onChange* | (value: string) => void | 값 변경 콜백. | |
aria-label | string | 그룹의 의미 (권장). | |
size | "sm" | "md" | "md" | 높이 32 / 40px. |