Checkbox

fandhe-frontend-pre-styled-ui の checkbox mod が提供するスタイル済み Checkbox 部品です。

Demo

Features

headless-ui の checkbox::root へ委譲し、size/colorPalette variant クラスを付与する。
3 値チェック状態（Unchecked/Checked/Indeterminate）を型で表現し、aria-checked の偽装・不整合な値を型で塞ぐ。
control パーツ（<div aria-hidden="true">）は視覚的なチェックボックス表現であり、支援技術からは隠して二重読み上げを防ぐ。
invalid/required/readonly の各フラグを CheckboxProps で受け取り、data-* 属性・ネイティブ属性へ反映する。

Anatomy

root
  hidden-input
  control
    indicator
  label

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	サイズ variant。
`palette`	`ColorPalette`	`ColorPalette::Accent`	colorPalette 軸。
`props`	`&CheckboxProps`	—	`checked`（3 値）・`disabled`・`invalid`・`required`・`readonly` を束ねる構造体。
`attrs`	`Vec<(&str, &str)>`	—	root パーツへ合成する追加属性。
`children`	`Vec<Node>`	—	root 配下の子ノード（通常 control/label/hidden-input を含む）。

Data Attributes

Part	Attribute	Observed Values
`control`	`data-disabled`	（値なし）
`control`	`data-invalid`	（値なし）
`control`	`data-state`	`checked`, `indeterminate`, `unchecked`
`hidden-input`	`data-disabled`	（値なし）
`hidden-input`	`data-invalid`	（値なし）
`hidden-input`	`data-state`	`checked`, `indeterminate`, `unchecked`
`indicator`	`data-disabled`	（値なし）
`indicator`	`data-invalid`	（値なし）
`indicator`	`data-state`	`checked`, `indeterminate`, `unchecked`
`label`	`data-disabled`	（値なし）
`label`	`data-invalid`	（値なし）
`label`	`data-state`	`checked`, `indeterminate`, `unchecked`
`root`	`data-disabled`	（値なし）
`root`	`data-invalid`	（値なし）
`root`	`data-state`	`checked`, `indeterminate`, `unchecked`

CSS Variables

Variable	Default
`--fandhe-checkbox-check-height`	`0.5rem`
`--fandhe-checkbox-check-width`	`0.25rem`
`--fandhe-checkbox-control-size`	`1rem`
`--fandhe-checkbox-dash-width`	`0.5rem`
`--fandhe-checkbox-gap`	`var(--fandhe-space-2)`
`--fandhe-checkbox-label-font-size`	`var(--fandhe-font-font-size-sm)`

Examples

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

checkbox は description 専用パートを持たない（headless anatomy に存在せず、chakra-ui も同様に呼び出し側合成のため。fandhe_frontend_pre_styled_ui::checkbox rustdoc「shadcn/ui との突合」節参照）。label の後ろへ通常の子ノードとして fg-muted + 1 段小さいフォントサイズの説明文を並べるだけで、2 段階の型階層を得られます。

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

Accessibility

WAI-ARIA

Attribute	Description
aria-checked	`hidden-input` パーツへ `CheckedState` から算出した値（`true`/`false`/`mixed`）を付与する（`Indeterminate` のとき `"mixed"`）。
aria-invalid	`props.invalid` が `true` のとき `hidden-input` パーツへ `"true"` を付与する。
aria-hidden	`control` パーツ（視覚的表現のみを担う `<div>`）に固定付与し、支援技術からの重複読み上げを防ぐ。