Segmented Control

실제 미리보기

언어, 보기 방식, 상태처럼 같은 수준의 짧은 값을 즉시 전환할 때 씁니다.

긴 설명이 필요하거나 선택지가 많으면 Radio Group이나 Select를 씁니다.

default고정 예시
이름 있는 그룹과 모든 선택지가 한 구조로 읽히는지 확인합니다.
three-options고정 예시
폭이 다른 세 선택지에서도 선택 면이 정확히 맞는지 확인합니다.
focus-visible직접 조작
방향키가 다음 활성 선택지로 초점과 값을 함께 옮기는지 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
selected고정 예시
선택 면과 aria-checked가 함께 바뀌는지 확인합니다.
disabled고정 예시
비활성 선택지를 클릭과 방향키가 건너뛰는지 확인합니다.
reduced-motion환경에서 확인
동작 줄이기에서도 선택 상태는 즉시 분명해야 합니다.
운영체제나 브라우저 설정을 바꾼 뒤 이 상태를 확인합니다.

radiogroup과 radio 의미, aria-checked, 방향키 로빙 초점을 제공합니다.

속성	타입	필수	설명
`label`	`string`	예	선택지 그룹의 접근성 이름입니다.
`value`	`Value`	예	현재 선택한 값입니다.
`options`	`readonly SegmentedControlOption<Value>[]`	예	값, 이름, 화면 내용, 비활성 상태를 담은 둘 이상의 선택지입니다.
`onValueChange`	`(value: Value) => void`	예	선택값이 바뀔 때 호출합니다.

지원 importimport { SegmentedControl } from "@/components/ui/segmented-control"

TSX

<SegmentedControl
  label="View"
  value={view}
  options={options}
  onValueChange={setView}
/>