Checkbox

Demo

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）。
• root/control は data-focus-visible を出力できる（実フォーカスを受けるのは visually-hidden な hidden_input のため、switch と同型の hidden-input パターン）。wasm-full の focus 配線が hidden-input の focus を境界 root へ写像する（checkbox.rs:45-53、crates/wasm-full/src/focus_visible.rs:51）。
• ark-ui が付与する data-hover/data-active/data-focus は出力しない（DOM ローカルな pointer/focus 操作状態のため、SSR 静的出力の関心外。CSS 擬似クラスまたは wasm-full 配線側で表現する設計判断、data_attrs.rs の data_focus_visible/data_highlighted と同型の契約）。

API Reference

Arguments

Data Attributes

Examples

Invalid + Required

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

自前 CSS の最小例

data-scope / data-part / data-state / data-focus-visible / data-disabled 属性セレクタで見た目を組み立てる最小例です。

[data-scope="checkbox"][data-part="control"] {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid #888;
  border-radius: 4px;
}
[data-scope="checkbox"][data-part="control"][data-state="checked"] {
  background: #2563eb;
  border-color: #2563eb;
}
[data-scope="checkbox"][data-part="control"][data-state="indeterminate"] {
  background: #6b7280;
  border-color: #6b7280;
}
[data-scope="checkbox"][data-part="control"][data-focus-visible] {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
[data-scope="checkbox"][data-part="root"][data-disabled] {
  opacity: 0.5;
}

Accessibility

Keyboard Interactions

WAI-ARIA