Checkbox
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;