Checkbox
서로 독립적인 선택을 켜고 끕니다.
- 성숙도
- 후보
- 소스 경로
components/ui/checkbox.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
복수 선택, 동의, 목록 선택처럼 각 값이 독립적일 때 씁니다.
사용하지 않을 때
즉시 설정을 바꾸는 단일 동작에는 Switch를 씁니다.
변형과 상태
unchecked고정 예시이름과 선택되지 않은 사각 컨트롤을 확인합니다.
checked고정 예시Radio Group과 같은 안쪽 사각형으로 선택 상태가 함께 드러나는지 확인합니다.
indeterminate고정 예시부분 선택이 mixed 상태로 전달되는지 확인합니다.
disabled고정 예시비활성 컨트롤이 실행되지 않는지 확인합니다.
접근성
native checkbox를 유지하고 mixed 상태는 aria-checked로 함께 알립니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
label | ReactNode | 예 | 선택값을 설명하는 보이는 이름입니다. |
description | ReactNode | 아니요 | 선택 결과를 설명하는 보조 문구입니다. |
indeterminate | boolean | 아니요 | 일부만 선택된 mixed 상태입니다. |
사용 예시
지원 importimport { Checkbox } from "@/components/ui/checkbox"
<Checkbox label="Select all" indeterminate />