Checkbox

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

Demo

data-state="checked"/"unchecked"/"indeterminate" の 3 態を持つチェックボックス。visually-hidden な input[type="checkbox"] がフォーム送信・キーボード操作の意味論を担い、チェックマークは CSS の border 合成で描画します（画像アセット不使用）。

UncheckedCheckedIndeterminateDisabled

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-state	checked, indeterminate, unchecked
hidden-input	data-disabled
hidden-input	data-state	checked, indeterminate, unchecked
indicator	data-disabled
indicator	data-state	checked, indeterminate, unchecked
label	data-disabled
label	data-state	checked, indeterminate, unchecked
root	data-disabled
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-label-font-size	var(--fandhe-font-font-size-sm)

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>`）に固定付与し、支援技術からの重複読み上げを防ぐ。