Checkboxは、デフォルトかcheckedのどちらかを切り替えるコンポーネントです。ある機能やオプションなどを有効にするか否かのon/offをユーザーが選択する場合に使います。

グループで使うRadioと異なり、1つのCheckbox単体で使えます。単体で完結し他に影響しない性質を応用し、グループで配置することで「選択肢の中から任意で複数を選択する」場面で使われることも多いです。

HTMLではcheckbox型の<input>要素でマークアップしますが、checkedの値のみが送信され、defaultの値は送信する手段がないため個別に実装する必要があります。

Mixin-based

HTML

<input class="checkbox-component" type="checkbox" value="" />
<input class="checkbox-component" type="checkbox" value="" checked />
<input class="checkbox-component" type="checkbox" value="" disabled />

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

.checkbox-component {
  @include inhouse.checkbox-style();
}

Class-based

HTML

<input class="in-checkbox" type="checkbox" value="" />
<input class="in-checkbox" type="checkbox" value="" checked />
<input class="in-checkbox" type="checkbox" value="" disabled />

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

@include inhouse.checkbox-export;