Checkbox

真偽値または不確定（indeterminate）の 3 値チェック状態を表すフォーム部品です。aria-checked/data-state の唯一の情報源として 3 値の型を用いるため、ARIA の偽装や不整合な値を型で防ぎます。

fandhe-frontend-headless-ui の checkbox mod が提供する構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを持つ unstyled 部品です。Themes 版が備える見た目（サイズ・colorPalette variant 等）は持たず、anatomy・ARIA・data-* のみを提供します。CSS は利用者が当てます。

スタイル済みの表示例は Checkbox を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Accept newsletter

Features

root（<label>）/control（<div aria-hidden="true">）/indicator/label/hidden_input（<input type="checkbox">）の 5 パーツで構成し、視覚的表現（control）とアクセシビリティ実体（hidden_input）を分離する（checkbox.rs:9-14, 230-232）。
CheckedState（Unchecked/Checked/Indeterminate）の 3 値が aria-checked/data-state 双方の唯一の情報源であり、偽装・不整合な値を型で塞ぐ（checkbox.rs:82-85）。
indicator は CheckedState::Unchecked のとき hidden 存在属性を出力する（checkbox.rs:251-260）。
hidden_input は CheckboxProps の disabled/invalid/required を受け取り、aria-invalid・ネイティブ存在属性へ反映する（checkbox.rs:139-153, 305-330）。

Anatomy

root
  control
    indicator
  label
  hidden-input

API Reference

Arguments

Name	Type	Default	Description
props.checked	CheckedState	CheckedState::Unchecked	3 値のチェック状態。aria-checked と data-state 双方の唯一の情報源（checkbox.rs:82-85）。
props.disabled / props.invalid / props.required / props.readonly	bool	false	CheckboxProps の各フラグ（checkbox.rs:139-153）。各パーツの data-* / ネイティブ属性へ反映される（代表 1 行に集約）。
hidden_input(name, value)	&str, &str		フォーム送信名・送信値。暗黙の既定値を持たず呼び出し側が明示する（checkbox.rs:284-287）。
attrs / children	Vec<(&str, &str)> / Vec<Node>		各パーツ共通の追加属性・子ノード（代表 1 行に集約）。

Data Attributes

Part	Attribute	Observed Values
control	data-state	checked
hidden-input	data-state	checked
indicator	data-state	checked
label	data-state	checked
root	data-state	checked

Examples

Invalid + Required

props.invalid/props.required を立てた未チェック状態の例です。

invalid かつ required な未チェック状態の Checkbox の組み立て例です。

Agree to terms

Accessibility

Keyboard Interactions

Key	Description
Space	hidden_input が実際に <input type="checkbox"> を出力するため、ブラウザ標準のチェックボックストグル操作が働く（checkbox.rs:14-15, 305-330）。

WAI-ARIA

Attribute	Description
aria-checked	hidden_input へ CheckedState から算出した値（"true"/"false"/"mixed"）を付与する（Indeterminate のとき "mixed"、checkbox.rs:312-320）。
aria-invalid	props.invalid が true のとき hidden_input へ "true" を付与する（checkbox.rs:322-324）。
aria-hidden	control パーツ（視覚的表現のみを担う div）に固定付与し、支援技術からの重複読み上げを防ぐ（checkbox.rs:230-232, 240-243）。