다중 선택을 위한 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과 함께 사용합니다.
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | — | 라벨 텍스트. default 슬롯으로 대체 |
checked | boolean | — | 제어 체크 상태. v-model:checked 지원 |
default-checked | boolean | false | 비제어 초기 체크 상태 |
disabled | boolean | false | 비활성 |
indeterminate | boolean | false | 부분 선택 (전체 선택 등) |
label-end | boolean | false | 라벨을 체크박스 앞에 배치 |
button | boolean | false | 버튼형 토글 (checkbox_button) |
aria-label | string | — | 라벨 없는 단독 체크박스 시 필수 |
ripple | boolean | — | 클릭 파장(ripple). standalone·button 변형 기본 활성 · div 변형은 true일 때만 · false 비활성 |
| 슬롯 | 설명 |
|---|---|
default | 라벨 텍스트 (label prop 대체). checkbox_content · checkbox_hint 조합 가능 |
| 이벤트 | 설명 |
|---|---|
update:checked | 체크 상태 변경 시. v-model:checked에 사용 |
change | 네이티브 input change 이벤트 |
Vue 컴포넌트가 렌더하는 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 | 버튼형 패딩 |