카드형 — checkbox_card
card 컴포넌트와 조합해 제목·설명을 표시합니다.
Checkbox
다중 선택을 위한 Checkbox 컴포넌트입니다. 기본 너비는 인라인(콘텐츠)이며, checkbox_block · checkbox_group_block으로 전체 너비를 사용합니다.
유형
기본은 `span.checkbox_control` + `label.checkbox_label for`(명시 연결) 순서입니다. 보이는 레이블이 없으면 `label.checkbox_control`로 input을 암묵 연결합니다. `checkbox_label-end`는 레이블 → 체크박스 순서이며, 기본 너비는 콘텐츠 기준입니다.
레이블 뒤
`checkbox_label-end`는 `checkbox_label` → `checkbox_control` 순으로 마크업합니다. 전체 너비가 필요하면 `checkbox_block` 또는 `checkbox_group_block`을 추가합니다.
기본
레이블과 보조 설명(checkbox_hint)을 함께 사용할 수 있습니다.
알림 설정
단독 사용
레이블 없이 체크박스만 사용할 수 있습니다. aria-label로 접근 가능한 이름을 지정합니다.
크기
checkbox_sm · checkbox(기본) · checkbox_lg로 박스·텍스트 크기를 조절합니다.
너비
기본은 인라인(콘텐츠) 너비입니다. checkbox_block · checkbox_group_block으로 전체 너비를 사용합니다.
색상
color_primary(기본) · color_success · color_danger · color_warning으로 선택 색을 지정합니다.
상태
선택·미선택·불확정(indeterminate)·비활성·오류(is-error) 상태를 지원합니다. 불확정은 JS로 input.indeterminate = true를 설정합니다.
그룹
checkbox_group으로 여러 항목을 묶습니다. checkbox_group_horizontal로 가로 배치, checkbox_group_compact로 간격을 줄입니다.
버튼형
checkbox_button은 태그·필터 UI에 적합합니다. 크기·색상 변형과 함께 사용할 수 있습니다.
카드형
`div.checkbox_card` + `article.card` 조합입니다. `card_extra`에는 `label.checkbox_control`로 input을 암묵 연결합니다. 카드 전체를 눌러 선택하려면 `div.checkbox_card.checkbox_card-clickable`을 쓰고 클릭은 JS로 위임합니다. 접근 가능한 이름은 `aria-labelledby`로 card_title · card_body에 연결합니다.
폼 레이아웃
form_vertical · form_horizontal과 함께 사용합니다.
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | — | 라벨 텍스트. children으로 대체 |
checked | boolean | — | 제어 체크 상태 |
defaultChecked | boolean | false | 비제어 초기 체크 상태 |
disabled | boolean | false | 비활성 |
indeterminate | boolean | false | 부분 선택 (전체 선택 등) |
labelEnd | boolean | false | 라벨을 체크박스 앞에 배치 |
button | boolean | false | 버튼형 토글 (checkbox_button) |
ariaLabel | string | — | 라벨 없는 단독 체크박스 시 필수 |
className | string | — | checkbox 루트에 추가 클래스 |
onChange | (event) => void | — | 체크 상태 변경 콜백 |
ripple | boolean | — | 클릭 파장(ripple). standalone·button 변형 기본 활성 · div 변형은 true일 때만 · false 비활성 |
API · Children
| Children | 설명 |
|---|---|
label | 라벨 텍스트. children으로 대체 가능 |
children | 라벨 텍스트 (label prop 대체, Vue default 슬롯 대응). checkbox_content · checkbox_hint 조합 가능 |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
checkbox | 체크박스 래퍼 |
checkbox_control · checkbox_input · checkbox_box | 입력·커스텀 박스 |
checkbox_label | 라벨 |
checkbox_label-end · checkbox_button | 레이아웃 변형 |
checkbox_group | 여러 체크박스 묶음 |
checkbox_card · checkbox_card-clickable | 카드형 — clickable은 data-ripple + JS 위임 |
is-checked · is-disabled | 상태 (CSS·JS 토글) |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--checkbox-size · --checkbox-size-sm · --checkbox-size-lg | 1rem · 0.875rem · 1.125rem | 체크박스 박스 크기 |
--checkbox-border-width · --checkbox-radius | 1px · 4px | 테두리·모서리 |
--checkbox-gap · --checkbox-gap-sm · --checkbox-gap-lg | var(--space-sm) · 0.375rem · 0.625rem | 라벨 간격 |
--checkbox-font-size · --checkbox-line-height | var(--text-size-base) · 1.5 | 라벨 타이포(md) |
--checkbox-label-weight | 400 | 라벨 두께 |
--checkbox-hint-size | var(--text-size-sm) | 힌트 텍스트 |
--checkbox-control-offset | 0.125rem | 박스 수직 정렬 |
--checkbox-group-gap | var(--space-sm) | 그룹 간격 |
--checkbox-button-padding-y · --checkbox-button-padding-x | 0.35rem · 0.75rem | 버튼형 패딩 |