← カテゴリ一覧に戻る

チェックボックス・ラジオボタン

input type=checkbox input type=radio fieldset legend

チェックボックスは複数選択、ラジオボタンは単一選択に使います。fieldset と legend でグループ化することで スクリーンリーダーに選択肢の文脈を伝えられます。

デモ: チェックボックス（複数選択）

好きな料理を選んでください（複数可）
<fieldset>
  <legend>好きな料理（複数可）</legend>
  <label htmlFor="food-sushi">
    <input
      id="food-sushi"
      type="checkbox"
      name="food"
      value="sushi"
      defaultChecked
    />
    寿司
  </label>
  <label htmlFor="food-ramen">
    <input
      id="food-ramen"
      type="checkbox"
      name="food"
      value="ramen"
    />
    ラーメン
  </label>
</fieldset>

デモ: ラジオボタン（単一選択）

配送方法を選択してください（1つのみ）
<fieldset>
  <legend>配送方法</legend>
  <label htmlFor="ship-standard">
    <input
      id="ship-standard"
      type="radio"
      name="shipping"   {/* 同じ name でグループ化 */}
      value="standard"
      defaultChecked
    />
    通常配送
  </label>
  <label htmlFor="ship-express">
    <input
      id="ship-express"
      type="radio"
      name="shipping"
      value="express"
    />
    速達
  </label>
</fieldset>

checked vs defaultChecked (JSX)

{/* 非制御: defaultChecked で初期値のみ設定 */}
<input type="checkbox" defaultChecked />

{/* 制御: checked + onChange (Client Component) */}
"use client";
const [agreed, setAgreed] = useState(false);
<input
  type="checkbox"
  checked={agreed}
  onChange={(e) => setAgreed(e.target.checked)}
/>

Indeterminate（不確定）状態

チェックボックスには indeterminate（−）という第3の状態があります。 「すべて選択」のような親チェックボックスで、子が一部だけ選択された状態を表すために使います。 HTML 属性では設定できず、JavaScript（または React の ref） で element.indeterminate = true と設定します。

// React (Client Component) での indeterminate 設定
import { useEffect, useRef } from "react";

const checkboxRef = useRef<HTMLInputElement>(null);
useEffect(() => {
  if (checkboxRef.current) {
    checkboxRef.current.indeterminate = true; // 不確定状態
  }
}, []);

<input ref={checkboxRef} type="checkbox" />

checkbox vs radio vs select 使い分け

コントロール選択数選択肢数の目安適した用途
checkbox複数可1〜10個程度トッピング選択、同意チェック、フィルター
radio1つのみ2〜6個程度性別、配送方法、評価（1〜5）
select1つのみ7個以上都道府県、言語、年/月/日

Tips

  • 必ず label の htmlFor とinput の id を対応させる — ラベルをクリックしても input がフォーカスされ、クリック領域が広がりアクセシビリティも向上する
  • ラジオボタンは同じ name 属性でグループ化する。異なる name は独立したグループになる
  • fieldset + legend でグループ化することでスクリーンリーダーが「〇〇グループ内の選択肢」と読み上げる
  • 選択肢が2〜6個ならラジオボタン、7個以上なら select を検討する

🤖 AIプロンプトテンプレート

以下の要件を満たす、`<input type="checkbox">` と `<input type="radio">` のHTML・CSSサンプルを作成してください。

- `<label>` と `for` / `id` を使ったアクセシブルな関連付けを行うこと
- チェックボックスは複数選択可能、ラジオボタンは同一 `name` で単一選択とすること
- `checked` / `disabled` 属性の使用例を含めること
- `<fieldset>` と `<legend>` でグループをセマンティックにまとめること
- カスタムスタイルのチェックボックス・ラジオボタンのCSS例も示すこと

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo