Toggle

fandhe-frontend-pre-styled-ui の toggle mod が提供するスタイル済み Toggle 部品です。「ボタンの押下状態」を表す 2 状態ボタンで、ネイティブ <button type="button"> 自身が押下状態を持ちます（switch mod のようなフォーム送信用の hidden input は持ちません）。

Demo

押下状態を持つ 2 状態ボタン。data-state 語彙は Switch の checked/unchecked ではなく on/off です（root 自身がネイティブ button であり、hidden input を持ちません）。

Features

`size`/`colorPalette` variant クラスを `root` へ付与し、headless-ui の `toggle::root` へ委譲する。
`pressed`/`disabled` の 2 状態フラグを直接引数で受け取る。
状態機械は Switch と同じ `Checkable` を内部再利用するが、公開語彙は `"on"`/`"off"`（`aria-pressed` と `data-pressed` を併記）で Switch とは異なる。
`root` 自身がネイティブ `<button type="button">` であり、Switch/RadioGroup のような hidden input を持たない。
`indicator` は off 時に styled 層 CSS が `display: none` で隠す（headless 層は `data-state` のみ出力する）。

Anatomy

root
  indicator

API Reference

Arguments

Name	Type	Default	Description
size	Size	Size::Md	サイズ variant。
palette	ColorPalette	ColorPalette::Accent	colorPalette 軸。
pressed	bool	false	押下状態。
disabled	bool	false	無効化状態。
attrs	Vec<(&str, &str)>		root パーツへ合成する追加属性。
children	Vec<Node>		ラベルとなる子ノード。

Data Attributes

Part	Attribute	Observed Values
indicator	data-state	off, on
root	data-disabled
root	data-pressed
root	data-state	off, on

CSS Variables

Variable	Default
--fandhe-toggle-font-size	var(--fandhe-font-font-size-sm)
--fandhe-toggle-padding-x	0.75rem
--fandhe-toggle-padding-y	0.375rem

Accessibility

Keyboard Interactions

Key	Description
Space / Enter	ネイティブ `<button>` のブラウザ既定動作により押下状態を切り替える（ブラウザ実装依存、本フレームワークの JS 出力によらない）。

WAI-ARIA

Attribute	Description
aria-pressed	`root` に付与。押下状態（true/false）を表す。