Switch

Demo

Features

• size/colorPalette variant クラスを root へ付与し、headless-ui の switch::root へ委譲する。
• ネイティブ checked 状態がブラウザにより aria-checked へ自動マップされるため、本モジュールは aria-checked を明示付与しない（二重読み上げ防止）。
• readonly/invalid/required の各フラグを SwitchProps で受け取り、data-* 属性・ネイティブ属性へ全パーツ一律反映する（イシュー #1622）。
• data-invalid は control パーツへ danger 色の box-shadow リングとして反映される（イシュー #2021、shadcn/ui との突合で追加）。
• root_with で track: SwitchTrack::Short を渡すと、つまみより細く短いトラック形状になり、つまみが上下左右へはみ出す（イシュー #3141）。SwitchTrack::Default（root が使う既定値）では class・CSS とも出力されない opt-in 軸。
• thumb_icon で thumb 中央に on/off アイコンを重ねられる（イシュー #3141）。checked/show の組み合わせに応じて opacity を切り替え、checked 状態で表示される on 側アイコンのみ colorPalette と連動した色になる（unchecked 側は常に中立色のまま。オフ状態を装飾色で強調しない意図的な非対称）。装飾のため aria-hidden="true" を固定する。

API Reference

Arguments

Data Attributes

CSS Variables

Examples

説明文付き（label + description の合成）

switch は description 専用パートを持たない（headless anatomy に存在せず、chakra-ui も同様に呼び出し側合成のため。fandhe_frontend_pre_styled_ui::switch rustdoc「shadcn/ui との突合」節参照）。root は flex コンテナのため、label とスイッチ本体を両端揃えで並べつつ、label 下へ fg-muted + 1 段小さいフォントサイズの説明文を並べる合成例です。

枠付きボックス内での利用

shadcn/ui の Examples が示す「枠付きカード内に label/description + switch を配置する」構成を、既存 anatomy パーツと plain な <div> の合成で再現した例です（専用の複合コンポーネントは新設しない、fandhe_frontend_pre_styled_ui::switch rustdoc「本イシューのスコープ外」節参照）。

短いトラック形状

root_with へ SwitchTrack::Short を渡した例です。つまみより細く短いトラックで、つまみが上下左右へはみ出す形状になります（イシュー #3141、R1375）。

thumb アイコン

thumb の子として thumb_icon を 2 個（checked/unchecked 用）配置した例です。状態に応じてどちらか一方だけが見え、checked 側が表示されているときのみ colorPalette に連動した色になります（unchecked 側は中立色のまま、イシュー #3141、R1376）。

Accessibility

WAI-ARIA