Radio
Rabioは一般的にラジオボタン(ラジオボタングループ)と呼ばれ、複数の項目から1つだけ選択するコンポーネントです。
ある項目をon(checked)にすると、それまで選択されていた別の項目がoffになります。この排他的な制御ができる一方で、onのRadioをさらに選択してもoffには戻りません。1つのRadio単体では使えないので、2つ以上のRadioをグループにして使いましょう。
Radioグループには初期値が必要です。初期状態で何か1つ選択されているようにしてください。初期値のない(何も選択されていない)Radioグループは、何か選択した状態から何も選択していない状態へ戻せないためユーザーにとって気軽に操作できないコントロールとなってしまい、ユーザビリティおよびアクセシビリティの課題が懸念されます。
Mixin-based
HTML
<input class="radio-button" type="radio" name="option" value="" checked />
<input class="radio-button" type="radio" name="option" value="" />
<input class="radio-button" type="radio" name="option" value="" disabled />
SCSS
@use '@pepabo-inhouse/components-web' as inhouse;
.radio-button {
@include inhouse.radio-style();
}
Class-based
HTML
<input class="in-radio" type="radio" name="option" value="" checked />
<input class="in-radio" type="radio" name="option" value="" />
<input class="in-radio" type="radio" name="option" value="" disabled />
SCSS
@use '@pepabo-inhouse/components-web' as inhouse;
@include inhouse.radio-export;