Native Select
Tinyrack のフィールド外観を保ちながら、ブラウザーやプラットフォームの選択 UI を使う実際の HTML select です。
主なプロパティ
| プロパティ | 動作 |
|---|---|
| 要素 | 実際の HTML <select> をレンダリングし、<option> と <optgroup> を子要素として受け取ります。 |
| 値 | ネイティブの value、defaultValue、onChange の動作を使います。 |
| 表示 | 閉じた状態には Tinyrack のスタイルを適用し、選択肢はブラウザーやプラットフォームが表示します。 |
| フォーム | name、form、required、FormData、検証、リセットの動作を維持します。 |
| リストボックス | multiple または size > 1 ではブラウザーのインラインリストボックスを維持し、装飾用の chevron を外します。 |
ネイティブフォームの動作と、モバイルで使い慣れたプラットフォームの選択 UI を優先する場合は TRNativeSelect を選んでください。Tinyrack が描画するグループ、選択表示、スクロール操作、配置、ポップアップ状態が必要な場合は TRSelect を使ってください。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/native-select.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRNativeSelect } from '@tinyrack/ui/components/native-select';
import { TRField } from '@tinyrack/ui/components/field';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
ネイティブリストボックスモード パーマリンク
size で複数の行を表示するか、multiple で複数の値を選択します。
API
TRNativeSelect はネイティブ select の属性、ref、イベント、クラス、スタイルを、レンダリングされた <select> に渡します。HTML select は読み取り専用状態をサポートしないため、readOnly prop は追加しません。
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
uiSize | "sm" | "md" | "lg" | "md" | 閉じたコントロールのサイズを設定します。 |
appearance | "solid" | "ghost" | "solid" | 通常時のフィールド外観を選びます。 |
multiple | boolean | false | ネイティブの複数選択リストボックスを有効にします。 |
size | number | ブラウザーのデフォルト | ネイティブの行を表示し、1 より大きい値ではリストボックスになります。 |
TRField.Label、ネイティブの <label>、aria-label のいずれかでアクセシブルな名前を付けてください。onChange={(event) => ...} では event.currentTarget.value を読み、複数選択では selectedOptions を読みます。開いた選択 UI はブラウザーとオペレーティングシステムが管理するため、選択肢のスタイルは Tinyrack の仕様に含まれません。