部品 · Selection Controls
選択コントロール
チェック、単一選択、範囲、即時設定の共通契約
- 利用範囲
- 選択フォーム全般
- 更新日
- 2026-07-10
プレビュー
状態と使い方
複数の項目を独立して選べる場面に使用します。
10km
すぐ反映される二値設定です。
主な部品
この仕様に含まれるUI
5 件
PostTypeSelector
選択
Checkbox
選択
RadioGroup
選択
Slider
選択
Switch
選択
解剖
Checkbox
複数選択または独立した同意を扱い、可視labelと同じ操作面に置く。
RadioGroup
相互排他的な選択肢をグループ化し、標準の矢印キー操作を維持する。
Slider
連続値または範囲をtrack、range、thumbの3要素で示す。
Switch
保存待ちを伴わない即時設定だけに使い、現在値をchecked stateで示す。
状態
未選択
境界線と可視labelを残し、操作対象を色だけに依存させない。
選択済み
primary面、indicator、thumb位置を組み合わせて示す。
focus
キーボード操作時にringとoffsetで現在位置を示す。
disabled
操作不能とopacityを共通化し、理由は周辺文言で補う。
仕様値
- Checkbox
- 見た目16px、操作領域44px
- Radio
- 見た目16px、indicator 10px、操作領域44px
- Slider
- track 8px、thumb 20px、操作領域44px
- Switch
- 見た目56 x 32px、操作領域44px
- focus
- 2px ring + 2px offset
- keyboard
- Space、矢印キー、Home / Endはprimitive標準を維持
運用ルール
選択モデルを混ぜない
複数選択はCheckbox、単一選択はRadio、即時設定はSwitchへ分ける。
可視labelを残す
controlだけを置かず、選択結果と影響が日本語で分かる状態にする。
見た目と操作領域を分ける
小型controlの形状は維持し、共通touch-targetで44pxの接触領域を保証する。
値を併記する
Sliderは現在値または単位を近くに表示し、位置だけで判断させない。