Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
1
12
1
1
18
1
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML
<fieldset>
  <legend>Gender</legend>
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
  <label><input type="radio" name="gender" value="other"> Other</label>
</fieldset>

ライブデモ

basic radio button

same name attribute in exclusive selectionoption create.

プレビュー全画面表示

card typeradio button

Selectionmiddle. card hilightdisplay. with:checked

プレビュー全画面表示

horizontalarrangementradiogroup

radio button horizontalarrangement. segmentcontro-l style to display.

プレビュー全画面表示

実務での使いどころ

  • <input type="radio"> の活用

    <input> 要素の radio 型は、一般にラジオグループ、すなわち関連するオプションの組み合わせを示すラジオボタンの集まりです。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。