Skip to content
fandhe-frontend
GitHub

Switch

fandhe-frontend-pre-styled-uiswitch mod が提供するスタイル済み Switch 部品です。

関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API

Demo

data-state="checked"/"unchecked" で見た目が切り替わるオン/オフ スイッチ。visually-hidden な input[type="checkbox"][role="switch"] がフォーム送信・キーボード操作の意味論を担います。

Features

  • `size`/`colorPalette` variant クラスを `root` へ付与し、headless-ui の `switch::root` へ委譲する。
  • ネイティブ `checked` 状態がブラウザにより `aria-checked` へ自動マップされるため、本モジュールは `aria-checked` を明示付与しない(二重読み上げ防止)。

Anatomy

root
  hidden-input
  control
    thumb
  label

API Reference

Arguments

NameTypeDefaultDescription
sizeSizeSize::Mdサイズ variant。
paletteColorPaletteColorPalette::AccentcolorPalette 軸。
checkedboolfalseオン/オフ状態。
disabledboolfalse無効化状態。
attrsVec<(&str, &str)>root パーツへ合成する追加属性。
childrenVec<Node>root 配下の子ノード(通常 hidden-input/control/label を含む)。

Data Attributes

PartAttributeObserved Values
controldata-disabled
controldata-statechecked, unchecked
labeldata-statechecked, unchecked
rootdata-disabled
rootdata-statechecked, unchecked
thumbdata-statechecked, unchecked

CSS Variables

VariableDefault
--fandhe-switch-label-font-sizevar(--fandhe-font-font-size-sm)
--fandhe-switch-thumb-size1.1rem
--fandhe-switch-thumb-travel1.1rem
--fandhe-switch-track-height1.4rem
--fandhe-switch-track-width2.5rem

Accessibility

WAI-ARIA

AttributeDescription
aria-hidden視覚的な表現のみを担う `control`/`thumb` パーツへ固定付与し、支援技術からの重複読み上げを防ぐ。