모든 패턴

Toggle / Switch

두 가지 상태(on/off) 사이를 전환하는 컨트롤

관련 WCAG 기준 — 클릭하여 상세 보기

기본 코드 예시

Baseline (HTML)tsx
Loading...

공통 베이스라인

모든 디자인 시스템에 적용
Must4

  • role="switch" 사용

    role="switch"와 aria-checked로 on/off 상태를 명시해야 합니다.

  • 레이블 연결

    토글의 목적을 설명하는 레이블이 연결되어야 합니다.

  • 키보드 작동

    Space 키로 토글을 활성화할 수 있어야 합니다.

  • 상태 변화 안내

    상태 변경 시 스크린리더에 변경 사항이 전달되어야 합니다.

Should2

  • on/off 텍스트 제공

    색상 외에 텍스트(켜짐/꺼짐)로 상태를 표시하세요.

  • 터치 타겟 44×44px

    모바일에서 충분한 터치 영역을 확보하세요.

Avoid2

  • 색상만으로 상태 구분 금지

    녹색/회색만으로 on/off를 나타내지 마세요. 색맹 사용자가 인식할 수 없습니다.

  • checkbox로 스위치 구현 금지

    checkbox는 시각적으로 토글처럼 보여도 의미론적으로 다릅니다. role="switch"를 사용하세요.

디자인 시스템별 구현

추가 체크포인트

  • FormControlLabel 연결

    MUI Switch는 FormControlLabel과 함께 사용해 레이블을 연결하세요.

  • inputProps aria-label 추가

    FormControlLabel 없이 단독 사용 시 inputProps에 aria-label을 추가하세요.

코드 샘플

MUI Switchtsx
Loading...

구현 노트

  • –MUI Switch는 내부적으로 <input type="checkbox">를 사용합니다.
  • –role="switch"는 자동으로 적용되지 않으므로 inputProps로 추가하세요.
  • –color prop 변경 시 대비율을 재검증하세요.

참고 문서