Toggle

押下状態を持つ 2 状態ボタンの unstyled 部品です。ネイティブ <button> 自身が押下状態を表し、hidden input を持たずフォーム送信に参加しません（「オン/オフ設定」を表す Switch とは異なる意味論です）。

Themes 版（fandhe-frontend-pre-styled-ui）はこの構造へ既定 CSS を追加するだけの薄いラッパーであり、CSS は持ちません。スタイル済みの表示例は Toggle を参照してください。

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

Demo

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

Features

Root（<button type="button">）/Indicator の 2 anatomy パーツと、押下状態機械 Toggle を提供する。「ボタンの押下状態」を表し、hidden input を持たずフォーム送信に参加しない（ark-ui 準拠）。
data-state（"on"/"off"）と aria-pressed（"true"/"false"）・data-pressed（存在属性）を併記する。crate::switch::Switch と同じ状態機械（Checkable）を再利用しつつ、公開 HTML の語彙は分離している。
indicator も data-state/data-pressed/data-disabled を反映する（ark-ui toggle.connect.ts の Indicator と突合、イシュー #1629）。表示/非表示切り替え自体は行わない装飾用パーツであり、実際の表示制御は styled 層 CSS の責務とする。
pointer/focus のローカル操作状態（data-hover/data-active/data-focus/data-motion）は参照サイト（ark-ui）が付与するが本実装は意図的に出力しない（UI 部品の責務境界、docs/policy/intentional-non-adoption.md §3.25 規則 2）。
複数 Toggle 間の roving focus（矢印キー移動）は単体コンポーネントのため不要であり、本コンポーネントのスコープ外。CSR のクリック → dispatch 配線（fandhe-frontend-wasm-full）は単体 Toggle 向けには未登録（イシュー #1629 スコープ外、後続 Issue 化を検討）。

Anatomy

root
  indicator

API Reference

Arguments

Name	Type	Default	Description
`pressed`	`bool`	`false`	押下状態。`data-state`（on/off）・`aria-pressed`・`data-pressed` へ反映する。
`disabled`	`bool`	`false`	無効化状態。ネイティブ `disabled`・`aria-disabled` 相当（`data-disabled`）を付与する。`indicator` にも同じ値を渡すことで両パーツの `data-disabled` を揃える。

Data Attributes

Part	Attribute	Observed Values
`indicator`	`data-disabled`	（値なし）
`indicator`	`data-pressed`	（値なし）
`indicator`	`data-state`	`off`, `on`
`root`	`data-disabled`	（値なし）
`root`	`data-pressed`	（値なし）
`root`	`data-state`	`off`, `on`

Examples

無効化状態

disabled = true を渡すとネイティブ disabled 属性と data-disabled が付与され、フォーカス・押下操作を受け付けなくなります。

自前 CSS の最小例

headless-ui はスタイルレスであるため、root/indicator の data-* 属性セレクタで見た目を組み立てます。

利用者が data-scope / data-part / data-state / data-pressed / data-disabled 属性セレクタで自前 CSS を当てる最小例です。headless-ui 自体はスタイルを持ちません。

CSS

[data-scope="toggle"][data-part="root"][data-state="on"] {
  background: #2563eb;
  color: #fff;
}
[data-scope="toggle"][data-part="root"][data-pressed] {
  border-color: #1d4ed8;
}
[data-scope="toggle"][data-part="root"][data-disabled] {
  opacity: 0.5;
}
[data-scope="toggle"][data-part="indicator"][data-state="off"] {
  display: none;
}

Accessibility

Keyboard Interactions

Key Description

Tab / Space / Enter root はネイティブ <button type="button"> であり、Tab でフォーカスを移動する。Space / Enter はブラウザ既定動作として click イベントを発火するが、aria-pressed/data-state/data-pressed の反転はブラウザが自動では行わない（root は pressed 引数に基づく静的属性を出力するのみで、単体 Toggle 向けの click → 状態更新の dispatch 配線は fandhe-frontend-wasm-full に未登録、上記 Features 参照）。呼び出し側で click イベントと pressed の状態更新を接続する実装が別途必要（disabled のときはフォーカス対象から除外される）。

Key	Description
Tab / Space / Enter	`root` はネイティブ `<button type="button">` であり、Tab でフォーカスを移動する。Space / Enter はブラウザ既定動作として `click` イベントを発火するが、`aria-pressed`/`data-state`/`data-pressed` の反転はブラウザが自動では行わない（`root` は `pressed` 引数に基づく静的属性を出力するのみで、単体 Toggle 向けの `click` → 状態更新の dispatch 配線は `fandhe-frontend-wasm-full` に未登録、上記 Features 参照）。呼び出し側で `click` イベントと `pressed` の状態更新を接続する実装が別途必要（`disabled` のときはフォーカス対象から除外される）。

WAI-ARIA

Attribute	Description
aria-pressed	`root` へ現在の押下状態（`"true"`/`"false"`）を付与する。