Radio
ラジオグループが選択状態を所有する1つの選択肢です。
主なプロパティ
| プロパティ | 選択肢 |
|---|---|
| 合成 | すべての TRRadio.Root を TRRadioGroup 内に置きます。 |
| 選択 | 各ルートに固有の value を与え、グループが選択値を所有します。 |
| サイズ | md、lg。デフォルトは md です。 |
| 項目の利用可否 | 1 項目だけがグループと異なる場合にルートの readOnly または disabled を使います。 |
表示ラベルは、各ルートを TRField.Item の中に TRField.Label と並べて作ります。アイテムが内側のラジオにラベルを結び付けるため、id や htmlFor は不要です。 TRField.Item には TRField.Root の祖先が必須なので、アイテムまたはグループ全体を 1 つの TRField.Root で囲みます。
ラジオは単独の真偽値コントロールではありません。独立した値をオン・オフする場合は TRCheckbox または TRSwitch を使います。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/radio.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRRadio } from '@tinyrack/ui/components/radio';
import { TRRadioGroup } from '@tinyrack/ui/components/radio-group';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
選択状態を示す
未選択と選択済み パーマリンク
選択状態はグループが所有する値との関係で決まります。
密度に合わせる
1 項目の利用可否を変える
編集可能、読み取り専用、無効 パーマリンク
すべての項目が同じ状態ならグループの prop を優先します。
API
Root のプロパティ
| プロパティ | 型 / 既定値 | 用途 |
|---|---|---|
value | unknown | グループ内でこの項目を識別します。 |
uiSize | 'md' | 'lg', 'md' | 表示グリフのサイズを指定します。 |
disabled, readOnly | boolean, 継承または false | 1 項目の利用可否を上書きします。 |
inputRef, ref | input ref, root ref | 非表示入力または表示ルートへアクセスします。 |
選択変更はルートではなく TRRadioGroup.onValueChange が通知します。Root はネイティブ prop とイベントを転送し、Base UI の render、状態に応じた className と style をサポートします。
Indicator とアクセシビリティ
TRRadio.Indicator は選択時にマウントされ、keepMounted で維持できます。グループと各項目にアクセシブルな名前を付けます。方向キー操作、フォーム所有、必須検証、リセットは TRRadioGroup が担います。
モジュールは TRRadio、各パーツ、prop・状態型、TRRadioUiSize を公開します。CSS は明示的に読み込みます。