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;