본문으로 건너뛰기

SegmentedControl

2–4개 보기를 빠르게 전환.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

보기

AllMailCalendarDocs

label

hideLabel

defaultValue

disabled

이렇게 · 이렇게 하지 않기

이렇게 같은 데이터를 다른 범위로 볼 때만 쓴다(전체·메일·일정). 라벨은 짧은 명사로 쓰고 es에서 가장 긴 라벨로 320px 폭을 검사한다. 라벨에 개수를 붙이지 않는다.
이렇게 결과가 즉시 바뀌는 보기 전환에 쓴다. 탭 패널 전환은 Tabs다.
이렇게 하지 않기 5개 이상이나 긴 문장 선택지에 쓰지 않는다(RadioGroup/Select).
이렇게 하지 않기 선택 표시를 스프링으로 튕기지 않는다. base 시간, 단일 이징.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`보기`	그룹 이름(legend). 항상 있어야 하고, 보이지 않게 하려면 hideLabel.
`hideLabel?`	`boolean`	`false`	legend를 시각적으로만 숨긴다(스크린리더는 읽음).
`options`	`readonly { value, label, disabled? }[]`	—	2–4개, 같은 폭. 긴 라벨은 2줄까지 줄바꿈(Select로 바꾸지 않는다). 미리보기는 전체/메일/일정/문서.
`defaultValue?`	`string`		비제어 초기값. 비우면 첫 활성 항목. 목록 보기면 URL ?view=와 묶는다(replaceState).
`disabled?`	`boolean`	`false`	그룹 전체 비활성.
`value?: string · onValueChange?: (value: string) => void · name?: string`	—	—	제어 모드와 폼 이름.