Features
- `size`/`colorPalette` variant クラスを `root` へ付与し、headless-ui の `switch::root` へ委譲する。
- ネイティブ `checked` 状態がブラウザにより `aria-checked` へ自動マップされるため、本モジュールは `aria-checked` を明示付与しない(二重読み上げ防止)。
Anatomy
root
hidden-input
control
thumb
label
API Reference
Arguments
| Name | Type | Default | Description |
|---|
| size | Size | Size::Md | サイズ variant。 |
| palette | ColorPalette | ColorPalette::Accent | colorPalette 軸。 |
| checked | bool | false | オン/オフ状態。 |
| disabled | bool | false | 無効化状態。 |
| attrs | Vec<(&str, &str)> | | root パーツへ合成する追加属性。 |
| children | Vec<Node> | | root 配下の子ノード(通常 hidden-input/control/label を含む)。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|
| control | data-disabled | |
| control | data-state | checked, unchecked |
| label | data-state | checked, unchecked |
| root | data-disabled | |
| root | data-state | checked, unchecked |
| thumb | data-state | checked, unchecked |
CSS Variables
| Variable | Default |
|---|
| --fandhe-switch-label-font-size | var(--fandhe-font-font-size-sm) |
| --fandhe-switch-thumb-size | 1.1rem |
| --fandhe-switch-thumb-travel | 1.1rem |
| --fandhe-switch-track-height | 1.4rem |
| --fandhe-switch-track-width | 2.5rem |
Accessibility
WAI-ARIA
| Attribute | Description |
|---|
| aria-hidden | 視覚的な表現のみを担う `control`/`thumb` パーツへ固定付与し、支援技術からの重複読み上げを防ぐ。 |