Skip to main content

Checkbox

MSK Checkbox는 네이티브 체크박스를 테마에 맞춰 스타일링하고, 그룹 단위 전체 선택과 indeterminate 상태를 제공하는 primitive입니다.

Preview​

Data API​

<label class="msk-ui-checkbox">
  <input type="checkbox" data-msk-checkbox>
  <span class="msk-ui-checkbox__box"></span>
  <span>약관 동의</span>
</label>

<div data-msk-checkbox-group>
  <label class="msk-ui-checkbox">
    <input type="checkbox" data-msk-checkbox-all>
    <span class="msk-ui-checkbox__box"></span> 전체 선택
  </label>
  <label class="msk-ui-checkbox">
    <input type="checkbox" data-msk-checkbox value="1">
    <span class="msk-ui-checkbox__box"></span> 항목 1
  </label>
</div>

JavaScript API​

window.MSK.ui.checkbox.set(input, true);
window.MSK.ui.checkbox.setIndeterminate(input, true);

Events​

input.addEventListener('msk:checkbox-change', (event) => {
  console.log(event.detail.checked);
});

Accessibility​

  • 네이티브 <input type="checkbox">를 그대로 사용하므로 포커스/키보드/스크린리더가 기본 동작합니다.
  • 그룹의 data-msk-checkbox-all 토글은 자식 체크 상태에 따라 checked / unchecked / indeterminate를 자동 반영합니다.