Switch
켜기/끄기를 표현하는 Switch 컴포넌트입니다. type="checkbox"와 role="switch"를 사용하며, 기본 너비는 인라인(콘텐츠)이며 switch_block · switch_group_block으로 전체 너비를 사용합니다.
유형
기본은 `switch_control` → `switch_label` 순서입니다. `switch_label-end`는 레이블 → 스위치 순서이며, 설정 화면에서 자주 사용합니다.
레이블 뒤
`switch_label-end`는 `switch_label` → `switch_control` 순으로 마크업합니다. 전체 너비가 필요하면 `switch_block` 또는 `switch_group_block`을 추가합니다.
기본
레이블과 보조 설명(switch_hint)을 함께 사용할 수 있습니다.
단독 사용
레이블 없이 스위치만 사용할 수 있습니다. `aria-label`로 접근 가능한 이름을 지정합니다.
크기
switch_sm · switch(기본) · switch_lg로 트랙·텍스트 크기를 조절합니다.
너비
기본은 인라인(콘텐츠) 너비입니다. switch_block · switch_group_block으로 전체 너비를 사용합니다.
색상
color_primary(기본) · color_success · color_danger · color_warning으로 켜짐 색을 지정합니다.
상태
켜짐·꺼짐·비활성·오류(is-error) 상태를 지원합니다.
그룹
switch_group으로 관련 스위치를 묶습니다. switch_group_compact로 간격을 줄입니다.
폼 레이아웃
form_vertical · form_horizontal과 함께 사용합니다.
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | — | 라벨 텍스트. children으로 대체 |
checked | boolean | — | 제어 켜짐 상태 |
defaultChecked | boolean | false | 비제어 초기 켜짐 상태 |
disabled | boolean | false | 비활성 |
labelEnd | boolean | false | 라벨을 스위치 뒤에 배치 |
size | 'sm' | 'md' | 'lg' | md | switch_sm · switch_lg |
ariaLabel | string | — | 라벨 없을 때 접근성 라벨 |
className | string | — | switch 루트에 추가 클래스 |
onChange | (event) => void | — | 상태 변경 콜백 |
ripple | boolean | true | 클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성 |
API · Children
| Children | 설명 |
|---|---|
label | 라벨 텍스트. children으로 대체 가능 |
children | 라벨 텍스트 (label prop 대체, Vue default 슬롯 대응). switch_content · switch_hint 조합 가능 |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
switch | 스위치 루트 label |
switch_sm · switch_lg · switch_label-end | 크기·레이아웃 |
switch_control · switch_input · switch_track · switch_thumb | 입력·트랙 |
switch_label | 라벨 |
switch_group | 여러 스위치 묶음 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--switch-width · --switch-height | 2.75rem · 1.5rem | 트랙 크기 (md) |
--switch-width-sm · --switch-width-lg | 2.25rem · 3.25rem | 크기 변형 |
--switch-gap · --switch-radius | — | 라벨 간격·모서리 |