Switch

Demo

Features

• Root（<label>）/ Control / Thumb / Label / HiddenInput の 5 anatomy パーツと、crate::state::Checkable を埋め込んだチェック状態機械を提供する。
• data-state 値語彙は "checked"/"unchecked"（crate::state::Checkable が一元管理、Checkbox/RadioGroup と共有）。
• hidden_input は <input type="checkbox" role="switch">（WAI-ARIA APG 準拠）。native の checked がブラウザによって aria-checked へ自動マップされるため、aria-checked を明示付与しない（二重読み上げ防止）。
• root が <label> のため、内包する hidden_input との暗黙のラベル関連付けが JS なしで成立する（for/id の配線が不要）。
• イシュー #1622（ark-ui / Radix Primitives との参照突合）で SwitchProps（disabled/readonly/invalid/required）を新設し、data-disabled/data-invalid/data-required/data-readonly を全 5 パーツへ一律反映するよう是正した（従来は root/control の data-disabled のみだった）。
• 呼び出し側 attrs に data-state/data-disabled/data-invalid/data-required/data-readonly/aria-checked/aria-invalid/type/role/checked/name/value/disabled/required と同名キー（大文字小文字無視）を渡しても fail-closed で除去し、状態の偽装を防ぐ（イシュー #1622 で追加）。
• 参考サイトとの意図的な差分（data-hover/data-active/data-focus 非出力、Enter キー非配線、readonly 時の native トグル抑止なし、Radix の button role="switch" パターン不採用）は crates/headless-ui/src/switch.rs モジュール doc「参考サイトとの意図的な差分」節を参照。

API Reference

Arguments

Data Attributes

Examples

Disabled, checked

checked: true + props.disabled: true の組み合わせ。hidden_input にネイティブ checked/disabled の両方が存在属性として出力される。

自前 CSS の最小例

利用者が data-scope / data-part / data-state / data-focus-visible / data-disabled / data-invalid 属性セレクタで自前 CSS を当てる最小例です。

[data-scope="switch"][data-part="control"] {
  width: 2.5rem;
  height: 1.4rem;
  border-radius: 999px;
  background: #ccc;
}
[data-scope="switch"][data-part="control"][data-state="checked"] {
  background: #2563eb;
}
[data-scope="switch"][data-part="thumb"] {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #fff;
}
[data-scope="switch"][data-part="thumb"][data-state="checked"] {
  transform: translateX(1.1rem);
}
[data-scope="switch"][data-part="control"][data-focus-visible] {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
[data-scope="switch"][data-part="root"][data-disabled] {
  opacity: 0.5;
}
[data-scope="switch"][data-part="control"][data-invalid] {
  border: 2px solid #dc2626;
}

Accessibility

Keyboard Interactions

WAI-ARIA