Checkbox

사용자가 여러 옵션 중 하나 이상을 선택할 수 있는 컴포넌트입니다.

개요

Checkbox는 단일 선택(동의/비동의) 및 다중 선택을 지원합니다. CheckboxGroup으로 여러 체크박스를 그룹화하고, FormField와 통합하여 폼 검증 및 접근성을 제공합니다.

설치

사용법

Checkbox, CheckboxGroup, CheckboxGroupItem을 import하여 사용합니다. FormField와 함께 사용하면 접근성과 폼 검증을 자동으로 처리합니다.

예제

기본

체크박스의 기본 상태와 설명 텍스트를 표시합니다.

사이즈

md(20px), lg(24px) 두 가지 크기를 지원합니다.

chip

칩 스타일의 체크박스로, 필터나 태그 선택에 적합합니다.

CheckboxGroup

여러 체크박스를 그룹화하여 다중 선택을 관리합니다.

방향

orientation prop으로 수직(vertical) 또는 수평(horizontal) 배치를 선택합니다.

수평 (horizontal)

FormField 통합

FormField와 함께 사용하면 레이블, 도움말, 에러 메시지가 자동으로 연결됩니다.

최소 1개 이상 선택하세요

접근성

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

  • 키보드 지원: Space로 선택/해제, Tab으로 포커스 이동이 가능합니다.
  • 스크린리더: 체크박스 상태(선택됨/해제됨)를 정확히 전달합니다.
  • FormField 통합: aria-describedby로 도움말 및 에러 메시지가 자동 연결됩니다.
  • 명도 대비 4.5:1 이상을 준수하여 시각적 접근성을 보장합니다.