コントロールの選択：チェックボックス、スイッチ、ラジオボタン

1）主な違い（意味、ない「図」）

• Nのいずれかを必要とする-ラジオを取る。
• フラグのセット-チェックボックスが必要です。
• あなたはすぐに動作を変更する1つのバイナリトグルスイッチが必要です-スイッチ。

2）意思決定ツリー（短い）

1.いくつかの独立した選挙？→チェックボックス。
2.セットから正確に1つのオプション？→ラジオボタン（またはセグメントコントロール/タグ）。
3.1つのバイナリーフラグ、効果は瞬時で顕著ですか？→スイッチ。
4.「部分」マーク（サブセット）が必要ですか？→トライステートのチェックボックス。
5.リスク/コストが高い（支払い、節度）？→ラジオ/チェックボックス+確認（スイッチではない）。

3）ユーザーの行動と期待

Switch=瞬時の結果。切り替えた後、ユーザーは別々の保存なしで即時の効果とリバーシビリティを期待します。
チェックボックス=オプションの選択。それはすぐにまたはボタンで適用することができます-モデルを明示的に表示することが重要です（「保存された設定「/」保存をクリック」）。
ラジオ=モード選択。遷移はインターフェイスを再構築できます。信号の変更（microanimation/text）。

4）状態と視覚的意味論

通常/ホバー/フォーカス/アクティブ/無効/エラー。テキストと指標の対比≥ AA。
トライステート（チェックボックス）：空白/部分/選択。部分的な状態はクリックできません。クリックすると「selected」に変わり、「empty」にはなりません。
スイッチ：色およびランナーの位置で明確なオン/オフ区別があります。色は意味の唯一のキャリアではありません（近くのアイコン/ラベル）。

5）コピーライティングと署名

選択したときにtrueになる動詞+オブジェクトまたはステートメント。

チェックボックス：「メール通知を受信する」。
スイッチ：「通知：オン/オフ」（左側のラベル、状態-右側またはスイッチ自体）。
ラジオ：「係数フォーマット：小数/分数/アメリカン」。
二重否定を避ける：「プラグを抜かないでください……」-混乱してる。

危険な行為のために、二次記述を加えて下さい： "。クイックベット（確認なし）-5秒以内にキャンセルできます"

6）アクセシビリティ（A11y）とキーボード

チェックボックス：'role=「checkbox」'、 'aria-checked=「true' false 'mixed」'、スペース-スイッチング。
Switch： native '<input type=「checkbox」>'、 switch visualまたは'role=「switch」、' aria-checked'。チェックボックスのような動作（スペース）。
Radio：コンテナ上の「role=」radiogroup「、要素上の」role=「radio」、選択肢の移動、スペース/Enter-確認。
グループ：一般的なコンテキストには'fieldset'/'legend'を使用します。
目に見える焦点リングを残して下さい；クリックゾーンの寸法≥接触ごとの44 × 44 px。

html
<! -- Radio Group -->
<fieldset role="radiogroup" aria-labelledby="odds-format">
<legend id = "odds-format "> Odds format </legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичный</label>
<label><input type="radio" name="odds" value="fractional"> Дробный</label>
<label> <input type = "radio" name = "odds" value = "american"> American </label>
</fieldset>

<! -- Checkbox (tri-state via aria) -->
<div role = "checkbox" aria-checked =" mixed" tabindex =" 0" id = "cb "> Notify about tournaments </div>

<! -- Switch (role = "switch") -->
<button role="switch" aria-checked="false" aria-labelledby="live-title" class="switch" id="live">
<span class="switch__knob"></span>
</button>
<span id = "live-title "> Live updates </span>

7）非同期の変更とエラー

スイッチ+ネットワーク：スイッチング→すぐに楽観的なUI→サーバー確認→失敗した場合は、静かにロールバックして理由を表示します。
「保存」のチェックボックス/ラジオ：確認はまだありません-グローバルな動作を変更しないでください。
危険なアクション：確認（modalka）または5-10秒間元に戻すパネル（規制が許可している場合）。

js
//Optimistic for switch const sw = document. getElementById('live');
sw. addEventListener('click', async ()=>{
const prev = sw. getAttribute('aria-checked') === 'true';
sw. setAttribute ('aria-checked', String (! prev)) ;//instantly try {
const r = await fetch('/api/live', { method:'POST', body: JSON. stringify({ enabled:!prev })});
if(!r.ok) throw new Error();
} catch {
sw. setAttribute('aria-checked', String(prev));     // откат
//show the toast "Failed to enable live"
}
});

8）モバイルパターン

スイッチは、モバイルでの設定の主なバイナリ制御です。
無線は、2-4オプションのセグメント制御に置き換えることができます（指のヒットはより良いです）。
リスト内のチェックボックス-大きなクリックエリアを使用して、迅速な複数選択をサポートします。

9）グループ化とレイアウトパターン

ラジオ：垂直リスト（より良いスキャン）、2-3オプション-1行のセグメント。
チェックボックス：1列の配置；長いリストの場合-グループの"Select all'+tri-state。
スイッチ：左のラベル、同じラインの右の制御；必要に応じて現在の状態をテキストで表示します（オン/オフ）。

10） Antipatterns

すぐに変更が適用されないスイッチ（「保存」が必要）。
複数の選択が可能なラジオボタン。
相互に排他的なオプションのチェックボックス（2つのチェックボックスとして「男性/女性」）。
危険な取り返しのつかないアクション（データの削除）のためのバイナリスイッチ。
テキストの二重否定。
フォーカスが失われるようにエラー時のレイアウトを変更します。

11） iGamingの詳細（例）

係数の形式：Decimal/Fractional/American radio group-がすぐに適用され、プロファイルに保存されます。
クイックベット：明示的な説明と各操作の後5-10秒間元に戻すとクイックベット（確認なし）スイッチ。
サブスクリプション/通知：イベントタイプ（勝利、トーナメント、預金）によるチェックボックス。グループのチェックボックス"Select all'-tri-state。
係数のライブアップデート：「Live-mode」を楽観的に切り替え、ネットワークエラーでロールバックします。
責任あるプレイ制限：期間（曜日/週/月）+金額フィールドのラジオボタン。「明日から」のエントリで変更された制限の確認。

12）システムトークンの設計（例）

json
{
"checkbox": { "size": 20, "radius": 4, "gap": 8 },
"radio": { "size": 20, "dot": 10, "gap": 8 },
"switch": { "width": 44, "height": 24, "knob": 20, "padding": 2 },
"focusRing": { "width": 2, "offset": 2 },
"motion": { "toggleMs": 140, "ease": "cubic-bezier(0. 2,0,0. 2,1)" },
"a11y": { "contrastAA": true }
}

css
.control { display:flex; align-items:center; gap:8px; min-height:36px; }
.switch { width:44px; height:24px; padding:2px; border-radius:999px; background:var(--bg-muted); position:relative; }
.switch[aria-checked="true"]{ background:var(--accent); }
.switch__knob{ position:absolute; width:20px; height:20px; border-radius:50%; left:2px; top:2px; transition: transform. 14s cubic-bezier(.2,0,.2,1); background:#fff; }
.switch[aria-checked="true"].switch__knob{ transform: translateX(20px); }
.control:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

13） UXロジックスニペット

js function updateMaster(master, items){
const total = items. length, checked = items. filter(i=>i. checked). length;
master. indeterminate = checked>0 && checked<total;
master. checked = checked===total;
}

js const radios = [...document. querySelectorAll('[role="radio"]')];
let i = radios. findIndex(r => r. getAttribute('aria-checked')==='true');
document. addEventListener('keydown', e => {
if(!['ArrowRight','ArrowDown','ArrowLeft','ArrowUp'].includes(e. key)) return;
e. preventDefault();
const dir = (e. key==='ArrowRight'          e. key==='ArrowDown')? 1: -1;
i = (i + dir + radios. length) % radios. length;
radios. forEach(r => r. setAttribute('aria-checked','false'));
radios[i].setAttribute('aria-checked','true');
radios[i].focus();
});

14）メトリクスと実験

スイッチでレートをミスクリックして周波数を元に戻します。
ラジオグループによる選択と検証のエラーの時間。
比率「すべて選択」と手動選択（速度、精度）との比較。
A/B： label copywriting、 option order、 segmented vs radio、 「apply imaging」 vs 「by button」。

15） QAチェックリスト

意味と選択肢

• コントロールはタスク（複数→チェックボックス；N→ラジオの一つ。インスタントバイナリ→スイッチ）。
• 危険な行為については、確認/取り消しがあります。

空室状況

• 正しい役割（'checkbox'/'switch'/'radiogroup'/'radio'）、 'aria-checked'/'indeterminate'。
• フォーカスリングが表示され、矢印がラジオグループ、スペーススイッチチェックボックス/スイッチで動作します。

動作

• スイッチは直ちに変更を適用します。on error-ロールバックとメッセージ。
• "Select all'のトライステートが正しい。ラベルのクリックが機能します。

ビジュアル

• 対照≥ AA；状態は色だけではありません。
• クリックゾーン≥ 44 × 44 px；順序および整列は安定しています。

モバイル

• 接触のためにテストされる2-4無線変形のための区分された制御。
• 指の打撃とスクロールは競合しません。

16）設計システムにおけるドキュメンテーション

コンポーネント：'チェックボックス'、'スイッチ'、'RadioGroup'/'SegmentedControl'。
サイズ/アニメーション/フォーカストークン、コピーライティングの例。
パターン："Select all' （tri-state）、" Instant application"、"Undo after risk"。
Do/Don 't gallery： delayed-save switch （don）、 checkboxes （don）の代わりにradio、 short set （do）のセグメント。

概要

コントロールの選択は、意味と期待に関するものです。チェックボックス-独立したフラグとグループ、スイッチ-インスタントオン/オフ機能、ラジオ-セットから正確に1つのオプション。可用性を維持し、非同期の状態とコピーライティングについて考えてください。ユーザーは間違いや驚きのない設定を自信を持って変更します。