Checkbox
二値または一部選択の状態をネイティブフォーム値として扱うコントロールです。
主なプロパティ
| 判断軸 | 選択肢 |
|---|---|
| 選択状態 | 未選択、選択済み、集合の一部だけを選択した場合の indeterminate |
| 利用可否 | 通常、フォーカスとフォーム値を保つ readOnly、利用できない disabled |
| サイズ | md、lg。デフォルトは md です。 |
| フォーム | name、value、uncheckedValue、form、required、ネイティブリセット |
すべてのチェックボックスに表示ラベルまたはアクセシブルな名前を付けます。コントロールと TRField.Label を TRField.Item で囲むと、クリックできる表示ラベルになります。アイテムが内側のコントロールにラベルを結び付けるため、id や htmlFor の指定は不要です。 TRField.Item には TRField.Root の祖先が必須なので、アイテムまたはグループ全体を 1 つの TRField.Root で囲みます。独立した選択やまとめて送信する選択にはチェックボックスを使い、複数の値を連携させる場合は TRCheckboxGroup を使います。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/checkbox.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRCheckbox } from '@tinyrack/ui/components/checkbox';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
選択状態を決める
未選択、選択済み、一部選択 パーマリンク
チェックボックスが一部だけ選択された集合を要約する場合に限り、一部選択を使います。
密度に合わせる
操作を維持または除外する
編集可能、読み取り専用、無効 パーマリンク
読み取り専用はフォーカスとフォーム値を保ち、無効はタブ順序と送信から外れます。
同意を必須にする
オンとオフの値を送信する
外部フォームとの関連付け パーマリンク
別のフォームに関連付けるには `form`、オフ状態も直列化するには `uncheckedValue` を使います。
API
選択と操作
| プロパティ | 型 / 既定値 | 用途 |
|---|---|---|
checked, defaultChecked | boolean, false | 選択を制御または初期化します。 |
indeterminate | boolean, false | 一部選択を公開し、ユーザーが確定したら解除します。 |
onCheckedChange | (checked, details) => void | 変更の試行を通知します。 |
disabled, readOnly | boolean, false | 操作を除外するか、フォーカス可能な不変値を保ちます。 |
uiSize | 'md' | 'lg', 'md' | 表示サイズを指定します。 |
フォームと合成
name、value、uncheckedValue、form、required、inputRef は非表示のネイティブ入力へ渡されます。非制御ルートはリセット時に defaultChecked へ戻り、制御ルートは checked に従います。Base UI の render、ref、イベント、状態に応じた className と style を利用できます。
TRCheckbox.Indicator は選択済みまたは一部選択で表示されます。render コールバックは state.indeterminate を受け取り、keepMounted はトランジション向けに DOM を維持します。モジュールは複合オブジェクト、各パーツ、プロパティ型、状態型、TRCheckboxUiSize を公開します。CSS は明示的に読み込みます。