Radio Group
複数候補から1つを選び、方向キー操作と1つのネイティブフォーム値を提供します。
主なプロパティ
| プロパティ | 選択肢 |
|---|---|
| ラベル | aria-label、aria-labelledby、フィールドセットの凡例 |
| 値 | 非制御は defaultValue、制御は value と onValueChange を使います。 |
| 利用可否 | readOnly は選択項目のフォーカスを保ち、disabled は操作とフォームデータを除外します。 |
| フォーム | グループの name、form、required。リセットは defaultValue を復元します。 |
| キーボード | 方向キーは無効項目を飛ばし、フォーカスと選択を循環します。 |
グループでは 1 つの値だけを選択できます。2 軸の方向キーを使用し、公開 orientation prop はありません。見た目の方向はレイアウトクラスで指定します。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/radio-group.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRRadioGroup } from '@tinyrack/ui/components/radio-group';
import { TRRadio } from '@tinyrack/ui/components/radio';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
選択全体の利用可否を決める
1つの値を必須にする
外部フォームに関連付ける
外部所有とリセット パーマリンク
`form` は非表示のラジオ入力を別のフォームに関連付けます。ネイティブリセットは非制御のデフォルト値を復元します。
API
値、利用可否、フォーム
| プロパティ | 型 / 既定値 | 用途 |
|---|---|---|
value, defaultValue | unknown, 未選択 | 選択した子の値を制御または初期化します。 |
onValueChange | (value, details) => void | 選択を通知し、details.cancel() で拒否できます。 |
disabled, readOnly | boolean, false | グループを無効にするか、選択値をフォーカス可能な読み取り専用にします。 |
name, form, required | ネイティブフォーム prop | 直列化、外部所有、制約検証を設定します。 |
inputRef | Ref<HTMLInputElement> | グループの非表示ネイティブ入力へアクセスします。 |
非制御グループは所有フォームのリセット時に defaultValue へ戻り、制御グループは value に従います。無効なグループは FormData から除外されます。
合成とアクセシビリティ
固有値を持つ TRRadio.Root をレンダリングし、グループにアクセシブルな名前を付けます。各項目は TRField.Item の中に TRField.Label と並べて置きます。アイテムが内側のラジオにラベルを結び付けるため、id や htmlFor は不要です。 TRField.Item には TRField.Root の祖先が必須なので、アイテムまたはグループ全体を 1 つの TRField.Root で囲みます。ルートは Base UI の render、ref、ネイティブイベントと属性、状態に応じた className と style をサポートします。SSR とハイドレーションでも選択を維持します。
モジュールは TRRadioGroup、TRRadioGroupProps、TRRadioGroupState を公開します。CSS は明示的に読み込みます。