Checkbox Group
独立して切り替えられる値を 1 つのアクセシブルなグループとして連携させます。
主なプロパティ
| 判断軸 | 選択肢 |
|---|---|
| 値の所有 | 非制御は defaultValue、制御は value と onValueChange を使います。 |
| 利用可否 | グループ全体は disabled、フォーム値を保つ個別項目は readOnly を使います。 |
| フォーム | 子チェックボックスに同じ name を付けると、選択した各項目が value を提供します。 |
| 親選択 | allValues と parent を持つ子チェックボックスを使います。 |
| バリデーション | 選択数のルールは制御された配列を検証します。 |
グループと各子チェックボックスにアクセシブルな名前を付けます。子ごとに TRField.Item の中へ TRField.Label を置くと、アイテムが内側のチェックボックスにラベルを結び付けるため、項目が繰り返されても id や htmlFor は不要です。 TRField.Item には TRField.Root の祖先が必須なので、アイテムまたはグループ全体を 1 つの TRField.Root で囲みます。独立した複数選択をまとめるためのコンポーネントです。1つだけ選ぶ場合は TRRadioGroup を使います。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/checkbox-group.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRCheckboxGroup } from '@tinyrack/ui/components/checkbox-group';
import { TRCheckbox } from '@tinyrack/ui/components/checkbox';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
集合全体の利用可否を決める
選択数を検証する
1つまたは2つを選ぶ パーマリンク
最小数と最大数のルールがある場合は値の配列を制御します。
すべて選択する親を追加する
親と一部選択 パーマリンク
全値を選ぶと親が選択済みになり、一部だけを選ぶと一部選択になります。
外部フォームに関連付ける
外部所有とリセット パーマリンク
各子チェックボックスに `form` を設定します。リセットすると非制御の `defaultValue` に戻ります。
API
値と利用可否
| プロパティ | 型 / 既定値 | 用途 |
|---|---|---|
value, defaultValue | string[], [] | 選択した子の値を制御または初期化します。 |
onValueChange | (value, details) => void | 次の値配列を通知します。 |
disabled | boolean, false | すべての子を無効にしてフォームデータから除外します。 |
allValues | string[] | parent が使う全集合を定義します。 |
合成とフォーム
異なる value と共通の name を持つ TRCheckbox.Root をレンダリングします。readOnly とフォーム所有は子チェックボックスに設定します。非制御グループはリセット時に defaultValue へ戻り、制御グループは value に従います。
ルートは Base UI の render、ref、イベント、ネイティブ属性、状態に応じた className と style を維持します。モジュールは TRCheckboxGroup とプロパティ・状態型を公開します。CSS は明示的に読み込みます。