チェックボックス Checkbox

複数の選択肢から複数を選択できるフォーム要素。オン/オフの切り替えにも使用。

使用場面: 利用規約への同意、複数選択、設定のオン/オフ切り替え 採用例: Todoist, Google Tasks

ライブデモ

好きなフルーツ

ソースコード

<fieldset class="demo-checkbox-group">
  <legend class="demo-checkbox-legend">好きなフルーツ</legend>
  <label class="demo-checkbox-label">
    <input type="checkbox" class="demo-checkbox-input" checked />
    <span class="demo-checkbox-custom"></span>
    りんご
  </label>
  <label class="demo-checkbox-label">
    <input type="checkbox" class="demo-checkbox-input" />
    <span class="demo-checkbox-custom"></span>
    バナナ
  </label>
  <label class="demo-checkbox-label">
    <input type="checkbox" class="demo-checkbox-input" />
    <span class="demo-checkbox-custom"></span>
    みかん
  </label>
  <label class="demo-checkbox-label">
    <input type="checkbox" class="demo-checkbox-input" disabled />
    <span class="demo-checkbox-custom"></span>
    <span style="color:#999;">ぶどう（品切れ）</span>
  </label>
</fieldset>
.demo-checkbox-group { border: none; padding: 0; margin: 0; }
.demo-checkbox-legend { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; }
.demo-checkbox-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: #444; cursor: pointer; padding: 4px 0;
}
.demo-checkbox-input { display: none; }
.demo-checkbox-custom {
  width: 20px; height: 20px; border: 2px solid #d1d5db;
  border-radius: 4px; position: relative; flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.demo-checkbox-input:checked + .demo-checkbox-custom {
  background: var(--ui-primary); border-color: var(--ui-primary);
}
.demo-checkbox-input:checked + .demo-checkbox-custom::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.demo-checkbox-input:disabled + .demo-checkbox-custom { opacity: 0.4; cursor: not-allowed; }
.demo-checkbox-input:focus-visible + .demo-checkbox-custom {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 25%, transparent);
}

AIプロンプト

Basic 
カスタムチェックボックスをHTML/CSSで作ってください。デフォルトのチェックボックスではなく、スタイル付きのオリジナルデザインです。
Custom 
以下の仕様でチェックボックスを実装してください。
- アニメーション付きのチェックマーク（SVGで描画）
- プライマリカラー: #2563eb
- 3つの状態：未選択、選択、不確定（indeterminate）
- ラベルクリックでも切り替え
- ホバー時にスケールアニメーション
- グループ内の「全選択」チェックボックス
Advanced 
アクセシビリティ対応のチェックボックスグループを実装してください。
- fieldset/legendでグループ化
- aria-checked（true/false/mixed）
- キーボードでSpaceキーで切り替え
- indeterminate状態の適切な管理
- フォーカスリング（:focus-visible）
- エラーバリデーション（最低1つ選択必須など）
- グループの「全選択/全解除」チェックボックスの三態管理
- prefers-color-scheme対応（ダークモード）
← カタログに戻る