Switch

fandhe-frontend-headless-ui の switch mod が提供するオン/オフ切り替えの unstyled 部品です。Root（<label>）/ Control / Thumb / Label / HiddenInput の 5 anatomy パーツを持ち、crate::state::Checkable を埋め込んだチェック状態機械（data-state は "checked"/"unchecked"、Checkbox/RadioGroup と共有語彙）を備えます。意味論・フォーム送信はネイティブ <input type="checkbox" role="switch">（HiddenInput）に委ねる構造です。

/themes/ 側の Switch（Chakra ライクな variant/size を持つスタイル層）と異なり、CSS を一切持ちません。

スタイル済みの表示例は Switch を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Notifications

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` の配線が不要）。

Anatomy

root
  control
    thumb
  label
  hidden-input

API Reference

Arguments

Name	Type	Description
root/control/thumb/label(checked)	bool	`data-state` の checked/unchecked を決める。
root/control(disabled)	bool	`data-disabled` を反映する。
hidden_input(name, value)	&str, &str	ネイティブ `name`/`value` 属性。
hidden_input(checked)	bool	`true` のときのみネイティブ `checked` 存在属性を出力する。
hidden_input(disabled)	bool	`true` のときのみネイティブ `disabled` 存在属性を出力する。
hidden_input(required)	bool	`true` のときネイティブ `required` + `data-required` を出力する。

Data Attributes

Part	Attribute	Observed Values
control	data-state	checked
label	data-state	checked
root	data-state	checked
thumb	data-state	checked

Examples

Disabled, checked

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

Dark mode (locked on)

Accessibility

Keyboard Interactions

Key	Description
Space	`hidden_input` はネイティブ `<input type="checkbox">` であり、Space キーでのトグルはブラウザ標準操作として成立する（JS 配線不要）。

WAI-ARIA

Attribute	Description
aria-hidden="true" (control)	装飾専用パーツとして固定付与する（意味論は `hidden_input` が担う）。
aria-checked	`hidden_input` へ明示付与しない。native の `<input type="checkbox" role="switch">` の `checked` 状態がブラウザにより自動マップされるため（二重読み上げ防止）。