Components
Toggle
Overview
토글은 설정이나 기능을 즉시 켜고 끄는 데 사용하는 컴포넌트입니다. value는 boolean입니다. true = On, false = Off. 좌·우 레이블(onLabel / offLabel)은 기본 없음 · 전달 시에만 표시됩니다. 상단 타이틀이 필요하면 @/components/label 의 Label + htmlFor를 권장합니다. - Default: Off + 조작 가능 (surface-neutral) - Selected: On + 조작 가능 (primary, selectedClassName으로 변경 가능) - Disabled / Selected + Disabled: 비활성 (off→surface-disabled, on→subtle)
스위치만 표시됩니다. defaultValue={true}면 초기 On(true)입니다. size 기본값은 medium입니다.
medium은 트랙 너비 32 · 썸 16×16, large는 트랙 너비 50 · 썸 24×24입니다. 기본값은 medium입니다.
- Medium트랙 32 · 썸 16×16. 폼·설정 기본.
- Large트랙 50 · 썸 24×24. 강조·터치 영역이 클 때.
Medium (32 · 16×16)
Large (50 · 24×24)
좌·우 onLabel / offLabel은 기본 없음 · 전달 시에만 표시합니다. 상단 타이틀이 필요하면 Label(@/components/label) + htmlFor를 권장합니다.
좌·우 onLabel / offLabel은 기본 없음입니다. 상단 타이틀은 Label(@/components/label) + htmlFor를 권장합니다.
기본 (레이블 없음)
상단 Label (권장)
onLabel / offLabel
disabled만 전달하면 Disabled(Off)가 기본입니다. defaultValue와 함께 전달하면 Selected + Disabled(muted)입니다.
- Disabled<Toggle disabled /> — Off + 비활성
- Selected + Disabled<Toggle defaultValue disabled /> — On + 비활성
Disabled
Selected + Disabled
미전달 시 primary. selectedClassName으로 On 트랙을 덮습니다 (Pagination selectedClassName과 동일). Tailwind · CSS 변수 · arbitrary hex/rgba를 자유롭게 씁니다.
- Primary미전달 — var(--surface-primary)
- TailwindselectedClassName="bg-emerald-500"
- CSS 변수selectedClassName="bg-[var(--status-success)]"
- HexselectedClassName="bg-[#10b981]"
- RGBAselectedClassName="bg-[rgba(239,68,68,0.9)]"
기본 Primary (미전달)
selectedClassName="bg-emerald-500"
selectedClassName은 스위치 트랙(배경) On 색입니다. 루트 className은 레이아웃용입니다. Tailwind · bg-[var(--…)] · arbitrary hex/rgba를 쓰면 됩니다.
Default · Selected · Disabled · Selected + Disabled. Overview에서 강제 표시합니다.
- DefaultOff + 조작 가능 (able)
- SelectedOn + 조작 가능 (able)
- DisabledOff + 비활성
- Selected + DisabledOn + 비활성
| Default | Selected | Disabled | Selected + Disabled |
|---|---|---|---|
default | selected | disabled | selected-disabled |