Fieldset
関連するコントロールを、ネイティブでアクセシブルな 1 つの legend の下にまとめます。
主なプロパティ
Root はネイティブの <fieldset> をレンダリングします。Legend はデフォルトでネイティブの <legend> をレンダリングし、グループにアクセシブルな名前を付けます。各子コントロールには固有の表示ラベルが必要です。コントロールと TRField.Label を TRField.Item にまとめると、アイテムが内側のコントロールにラベルを結び付けるため、id や htmlFor は不要です。TRField.Item には TRField.Root の祖先が必須です。アイテムは 1 つの TRField.Root にまとめて Root の中に置き、フィールドセットの間隔を保つにはそのルートに gap を指定します。Root の disabled は、ネイティブのフォームコントロールへの無効状態の伝播を利用します。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/fieldset.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRFieldset } from '@tinyrack/ui/components/fieldset';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
API
TRFieldsetRoot と TRFieldsetLegend は個別にエクスポートされ、TRFieldset.Root と TRFieldset.Legend としても利用できます。
| パーツ | 説明 |
|---|---|
Root | ネイティブ fieldset 属性、disabled、render、className、style、イベント、ref |
Legend | デフォルトはネイティブ legend。render、className、style、イベント、ref に対応 |
ネイティブの <legend> の配置が適さない場合に限り render を使用してください。カスタムレンダリングした legend も、Base UI が aria-labelledby で fieldset と関連付けます。