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 を持ちません）。variant（Outline/Ghost）はイシュー #2023 の shadcn/ui 突合で新設しました。

State

Size

Variant

Palette

Features

size/variant/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 のみ出力する）。
variant（ToggleVariant::Outline/Ghost）はイシュー #2023 の shadcn/ui 突合で新設した軸。Outline（既定）は輪郭あり、Ghost は背景・輪郭なしの最小装飾（ButtonVariant::Ghost と同じ意味論）。

Anatomy

root
  indicator

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	サイズ variant。
`variant`	`ToggleVariant`	`ToggleVariant::Outline`	外観 variant（Outline/Ghost、イシュー #2023）。
`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-disabled`	（値なし）
`indicator`	`data-pressed`	（値なし）
`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）を表す。