Switch

즉시 적용되는 켜기/끄기 상태 전환에 사용되는 토글 컴포넌트입니다. FormField와 통합되어 폼 검증 및 접근성을 제공합니다.

기본

설치

사용법

Switch 컴포넌트를 import하고 checked, onCheckedChange로 상태를 관리합니다.

예제

라벨 포함

label prop으로 라벨을 추가하고, labelPosition으로 위치를 조정할 수 있습니다.

사이즈

lg(기본값)와 md 두 가지 크기를 제공합니다.

비활성화 상태

disabled prop으로 스위치를 비활성화할 수 있습니다.

FormField 통합

FormField와 함께 사용하면 자동으로 접근성 속성이 연결되며 폼 검증을 쉽게 구현할 수 있습니다.

변경사항을 자동으로 저장합니다

설정 패널 예제

실제 설정 화면에서 사용되는 패턴입니다.

푸시 알림

새로운 소식을 푸시 알림으로 받습니다

이메일 알림

주간 뉴스레터를 이메일로 받습니다

SMS 알림

중요한 알림을 SMS로 받습니다

접근성

WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.

키보드 지원

키동작
Space스위치 상태 전환
Tab다음 포커스 가능한 요소로 이동
Shift + Tab이전 포커스 가능한 요소로 이동

ARIA 속성

  • role="switch": 스위치 역할 명시
  • aria-checked: 켜짐/꺼짐 상태 전달
  • aria-invalid: 에러 상태 전달
  • aria-describedby: helper text, error 메시지 연결
  • FormField와 함께 사용 시 label, error, helperText 자동 연결