Components
Checkbox
Overview
Checkbox는 하나 이상의 독립적인 항목을 선택할 때 사용하는 입력 컴포넌트입니다. 여러 개를 동시에 선택할 수 있습니다. 단일 선택은 Radio 컴포넌트 사용을 권장합니다.
Basic
CheckboxGroup + CheckboxItem. defaultValue로 초기 선택 배열을 지정합니다.
defaultValue로 초기 선택을 지정합니다. Radio · Select와 동일합니다.
Shape
square(기본) · circle. API는 동일하고 형태만 다릅니다.
- square기본 사각 체크
- circle원형 다중 선택 (단일 선택은 Radio)
square
circle
Sizes
medium · large
- Medium기본 크기
- Large큰 크기
medium
large
Disabled
disabled만 전달하면 Disabled(미선택)가 기본입니다. defaultValue에 포함한 뒤 disabled하면 Selected + Disabled(muted)입니다.
- Disableddisabled만 — 미선택 + 비활성
- Selected + DisableddefaultValue + disabled — 선택 유지 + 조작 불가
Disabled
Selected + Disabled
MaxLength
최대 선택 개수. 미전달 시 제한 없음. maxLength={1} 이상이면 1~maxLength개까지 선택합니다.
- maxLength={1}최대 1개 (추가 선택은 기존 해제 후)
- maxLength={2}최대 2개
maxLength={1}
maxLength={2}
Color
선택(Selected) 배경색. 기본 Primary. color prop으로 토큰·CSS 색을 전달합니다.
기본 Primary
color="#50C878"
With Label
Checkbox + Label(@/components/label)을 htmlFor로 조합합니다.
States
인터랙션·Disabled 상태입니다. Overview에서 강제 표시합니다.
- Default미선택
- Hover포인터가 올라간 상태
- Focus포커스 링
- Selected선택 (Primary)
- Disabled미선택 + 비활성
- Selected + Disabled선택 유지 + 비활성 (muted)
| Default | Hover | Focus | Selected | Disabled | Selected + Disabled |
|---|---|---|---|---|---|
default | hover | focus | selected | disabled | selected-disabled |