Select
既知のコレクションから 1 つの値を選び、ボタンで開くキーボード操作可能なポップアップを提供します。
主なプロパティ
| プロパティ | 動作 |
|---|---|
| value | defaultValue で非制御、または value と onValueChange で制御します。 |
| open | defaultOpen で非制御、または open と onOpenChange で制御します。 |
| disclosure | Trigger が focus を持ち、Portal、Positioner、Popup が floating layer を構成します。 |
| popup の配置 | popup は trigger より狭くならず、通常は 256 px まで広がります。320 px と利用可能な viewport 幅を上限とし、強調背景は option の余白全体を覆います。 |
| collection | group、label、separator、disabled item、text、indicator が menu anatomy を表します。 |
| form | name、form、required、inputRef が native submit、validation、reset と統合されます。 |
trigger が密度の高いコントロールサーフェスに属する場合は TRSelect.Trigger uiSize="md" を使います。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/select.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRSelect } from '@tinyrack/ui/components/select';
import { TRForm } from '@tinyrack/ui/components/form';
import { TRField } from '@tinyrack/ui/components/field';
import { TRButton } from '@tinyrack/ui/components/button';
import { ChevronDown } from 'lucide-react';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
トリガーのサイズ パーマリンク
ポップアップの一覧とは別にトリガーの密度を選べます。
長くスクロールする collection パーマリンク
ポップアップを開き、高さ制限、スクロール矢印、長いラベル、強調されたフォーカス表示を確認します。
API
完全な anatomy は Root、Label、Trigger、Value、Icon、Portal、Backdrop、Positioner、Popup、List、Item、ItemIndicator、ItemText、Arrow、ScrollDownArrow、ScrollUpArrow、Group、GroupLabel、Separator です。各 part は TRSelect.Part と named TRSelectPart export の両方で提供され、対応する TRSelectPartProps と TRSelectPartState type も export されます。
| 目的 | 公開 prop とデフォルト |
|---|---|
| 値 | defaultValue または制御された value を使います。multiple のデフォルトは false で、items は値と表示ラベルを対応付けます。 |
| 開閉 | defaultOpen のデフォルトは false です。制御された open も使え、modal と highlightItemOnHover のデフォルトは true です。 |
| 利用状態 | disabled、readOnly、required のデフォルトはすべて false です。 |
| トリガー | `uiSize="md" |
| 配置 | Positioner はトリガーの下 4 px の位置で開き、配置用 prop は受け取りません。十分な空きがない場合はトリガーの上へ切り替わります。 |
| フォーム | name、form、autoComplete、inputRef を受け取ります。非制御 select は native reset で defaultValue に戻ります。 |
Trigger にアクセシブルな名前を付けます。キーボードでは Arrow Down で開き、有効な option 間を移動し、typeahead を使い、Enter で確定し、Escape で閉じた後に trigger へ focus が戻ります。ポインターの hover、open、highlighted、selected 状態は背景色だけで強調し、フォーカス枠はキーボード操作で得た focus にだけ表示します。必要に応じて value と open を独立して制御します。利用できない control には disabled、変更できない focusable value には readOnly を使います。