Checkbox
複数選択や同意/承認など、0個・1個・複数個を独立して選ぶための入力パーツ。
プレビュー(動作デモ)
ラベルクリック・スペースキーでも切り替わります。一括選択チェックボックスはindeterminate 状態 (一部選択) を表示します。
二値の意思決定: 未同意
履歴の表示種別 (絞り込み)
表示中: 通話
「すべて」は子の選択状況に応じて未選択 / 一部選択 (indeterminate) / 全選択を切り替えます。
状態
Normal
Disabled
Error
実装例
"use client";
import { useState } from "react";
import { Checkbox } from "@/components/Checkbox";
function Example() {
const [agree, setAgree] = useState(false);
return (
<Checkbox
label="利用規約に同意する"
checked={agree}
onChange={(e) => setAgree(e.target.checked)}
/>
);
}仕様
寸法・色
- ボックス: 16×16px / radius 4px
- ラベルとの gap: 8px / 上下 padding: 8px（ラベルあり時のみ）
- Normal: bg 白 / border
#D1D5DB - Hover: bg
rgba(31,41,55,0.08) - Checked / Indeterminate: bg
#0066CC/ icon 白 - Disabled: bg
#E5E7EB/ text#D1D5DB - Error: border
#E01E5A+aria-invalid自動付与
実装上の特徴
- ネイティブ
<input type="checkbox">を視覚的に隠して、隣接する.checkbox__boxを CSS でスタイル (キーボード操作・:focus-visible・スクリーンリーダー対応はネイティブ動作のまま) - ラベル全体が
<label>なのでテキスト部もクリックヒットエリア indeterminateは DOM プロパティなのでuseEffectでref.current.indeterminateに同期
利用基準
使うべき時
- 複数選択肢の中から 0 個・1 個・複数個を独立して選ぶ場合
- 「利用規約に同意」など二値の意思表示 (やる/やらない)
- テーブルヘッダの「全選択」(indeterminate で部分選択を表現)
- ラベルテキストもクリックで切り替えできるよう <label> で包む (本コンポーネントは自動)
使わない時
- 排他的に 1 つだけ選択させる → Radio Button を使用
- 機能の有効 / 無効を即時反映する設定 → Toggle Switch を使用
- 選択肢が非常に多い場合 → Combobox のマルチセレクトを検討