ToggleGroup
같은 대상을 보는 방식을 바꿔요(목록/카드, 라이트/다크). 누르면 바로 적용돼요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
text
text · disabled
text · pressed
text · pressed · disabled
icon
icon · disabled
icon · pressed
icon · pressed · disabled
사용법
- 폼 값 고르기에는 쓰지 않아요그때는 RadioGroup이나 Select예요.
- 포커스 링은 안쪽항목끼리 붙어 있어서 Tab처럼 −2px 안쪽에 그려요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| multiple | 켜면 value가 string[] (타입으로 강제) | false |
| value · onValueChange | 단일은 항상 하나가 눌려 있어요 | — |
| disabled | 그룹 전체 또는 항목 하나 | false |
| ToggleGroupItem iconOnly | 24×24 아이콘 항목, aria-label 필수 | false |
코드
tsx
<ToggleGroup value={view} onValueChange={setView} aria-label="보기 방식">
<ToggleGroupItem value="list">목록</ToggleGroupItem>
<ToggleGroupItem value="card">카드</ToggleGroupItem>
</ToggleGroup>