Switch

켜기/끄기를 표현하는 Switch 컴포넌트입니다. type="checkbox"와 role="switch"를 사용하며, 기본 너비는 인라인(콘텐츠)이며 switch_block · switch_group_block으로 전체 너비를 사용합니다.

유형

기본은 switch_control → switch_label 순서입니다. switch_label-end는 레이블 → 스위치 순서이며, 설정 화면에서 자주 사용합니다.

기본 — switch레이블 뒤 — switch_label-end

switch_label-end는 switch_label → switch_control 순으로 마크업합니다. 전체 너비가 필요하면 switch_block 또는 switch_group_block을 추가합니다.

푸시 알림 받기마케팅 정보 수신이벤트·할인 소식을 이메일로 받습니다.

알림 설정 — switch_group_block이메일 알림푸시 알림SMS 알림

Small — switch_smLarge — switch_lg

레이블과 보조 설명(switch_hint)을 함께 사용할 수 있습니다.

다크 모드자동 저장

레이블 없이 스위치만 사용할 수 있습니다. aria-label로 접근 가능한 이름을 지정합니다.

switch_sm · switch(기본) · switch_lg로 트랙·텍스트 크기를 조절합니다.

Small — switch_smMedium — 기본Large — switch_lg

기본은 인라인(콘텐츠) 너비입니다. switch_block · switch_group_block으로 전체 너비를 사용합니다.

기본 — 인라인 너비switch_block — 전체 너비

switch_group_blockWi-Fi블루투스

color_primary(기본) · color_success · color_danger · color_warning으로 켜짐 색을 지정합니다.

PrimarySuccessDangerWarning

켜짐·꺼짐·비활성·오류(is-error) 상태를 지원합니다.

꺼짐켜짐비활성켜짐 (비활성)

switch_group으로 관련 스위치를 묶습니다. switch_group_compact로 간격을 줄입니다.

개인정보 설정프로필 공개다른 사용자가 내 프로필을 볼 수 있습니다.활동 기록 표시최근 활동이 타임라인에 노출됩니다.검색 허용

접근성 — switch_group_compact고대비 모드애니메이션 줄이기

form_vertical · form_horizontal과 함께 사용합니다.

Prop	타입	기본값	설명
`label`	string	—	라벨 텍스트. default 슬롯으로 대체
`checked`	boolean	—	제어 켜짐 상태. v-model:checked 지원
`default-checked`	boolean	false	비제어 초기 켜짐 상태
`disabled`	boolean	false	비활성
`label-end`	boolean	false	라벨을 스위치 뒤에 배치
`size`	'sm' \| 'md' \| 'lg'	md	switch_sm · switch_lg
`aria-label`	string	—	라벨 없을 때 접근성 라벨
`ripple`	boolean	true	클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성

슬롯	설명
`default`	라벨 텍스트 (label prop 대체). switch_content · switch_hint 조합 가능

이벤트	설명
`update:checked`	켜짐 상태 변경 시. v-model:checked에 사용
`change`	네이티브 input change 이벤트

Vue 컴포넌트가 렌더하는 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`	—	라벨 간격·모서리