UI 가이드

다크 모드

ScCheckboxWrapper ​

ScCheckboxWrapper는 복수 항목 중 다중 선택이 가능한 체크박스 그룹 컴포넌트입니다.
v-model을 통해 선택된 값 목록을 바인딩하며, 사이즈, 레이아웃 제어가 가능합니다.

✅ 기본 사용법 ​

결과 : []
vue
<div>
    <sc-checkbox-wrapper v-model="dummy">
        <sc-checkbox value="1">---1---</sc-checkbox>
        <sc-checkbox value="2">---2---</sc-checkbox>
        <sc-checkbox value="3">---3---</sc-checkbox>
        <sc-checkbox value="4">---4---</sc-checkbox>
    </sc-checkbox-wrapper>
    <div class="mt-5 text-sm">결과 : {{ dummy }}</div>
</div>

✨ 사용 예시 모음 ​

▸ 방향지정 ​

결과 : []
vue
<div class="mt-2">
  <sc-checkbox-wrapper v-model="dummy1" vertical>
    <sc-checkbox value="1">---1---</sc-checkbox>
    <sc-checkbox value="2">---2---</sc-checkbox>
    <sc-checkbox value="3">---3---</sc-checkbox>
    <sc-checkbox value="4">---4---</sc-checkbox>
  </sc-checkbox-wrapper>
  <div class="mt-5 text-sm">결과 : {{ dummy }}</div>
</div>

▸ validation ​

기본형
vue
<sc-validator ref="validator">
    <sc-form-box col="1">
      <sc-form-item label="기본형" :label-width="100">
        <sc-checkbox-wrapper v-model="dummy2" :rules="[ruleNotEmpty]">
          <sc-checkbox value="1">---1---</sc-checkbox>
          <sc-checkbox value="2">---2---</sc-checkbox>
          <sc-checkbox value="3">---3---</sc-checkbox>
          <sc-checkbox value="4">---4---</sc-checkbox>
        </sc-checkbox-wrapper>
      </sc-form-item>
    </sc-form-box>
</sc-validator>
<div class="mt-5">
    <sc-button @click="check">Check</sc-button>
    <sc-button @click="clear">Clear</sc-button>
</div>

🛠️ 속성 (Props) ​

이름타입기본값설명
modelValueArray<string | number>[]선택된 항목 리스트 (v-model)
disabledbooleanfalse전체 비활성화 여부
lazyBooleanfalse유효성 검사 지연 적용
rulesArray[]유효성 검사 규칙
verticalBooleanfalse체크박스 그룹을 수직 배치

📤 이벤트 (Emits) ​

이벤트 이름설명
update:modelValue선택된 값 배열 변경 시 발생
change선택된 값이 변경되었을 때 발생

🔳 슬롯 (Slots) ​

이 컴포넌트는 슬롯을 지원하지 않습니다.

🎨 스타일 클래스 ​

클래스 이름설명
.sc-checkbox-wrapper전체 wrapper
.sc-checkbox-wrapper.vertical세로형태 일때
.invalid유효성 검사 실패 시(에러 상태)
.invalid.shake에러 상태 + 흔들림 애니메이션 필요할 때
.error에러 메시지 영역
.error .message에러 메시지 텍스트
:deep(.sc-checkbox-container)체크박스 항목(자식 컴포넌트) 클래스
:deep(label)체크박스 라벨(에러 상태에서) 클래스
:deep(.checkmark)체크박스 표시(에러 상태에서) 클래스

📝 기타 참고사항 ​

  • v-model은 선택된 값의 배열로 동기화됩니다.