Autocomplete
自由入力テキストを受け取り、既知のコレクションから候補を絞り込んで通知します。
主なプロパティ
| プロパティ | 動作 |
|---|---|
| 値 | 項目と一致しない場合でも、テキスト値を自由に編集できます。 |
| 入力の構造 | Label → InputGroup → 任意の InputAdornment + Input + Clear + Trigger の順で、Icon は Trigger 内に配置します。 |
| ポップアップの構造 | Status が結果を通知し、List にグループ、項目、区切り線、Empty のフィードバックを含めます。 |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/autocomplete.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRAutocomplete } from '@tinyrack/ui/components/autocomplete';
import { TRForm } from '@tinyrack/ui/components/form';
import { TRField } from '@tinyrack/ui/components/field';
import { TRButton } from '@tinyrack/ui/components/button';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
サイズ パーマリンク
InputGroup に uiSize を渡して、Autocomplete の高さを隣の Input、NumberField、Button と揃えます。
入力補完モード パーマリンク
候補リスト、リストとインライン補完の併用、インライン補完のみ、補完なしから選べます。
オプションと結果の状態 パーマリンク
通常のコレクション、無効なオプション、空の結果をルートの利用可否とは分けて比較します。
自由入力の意味 パーマリンク
コレクション外の値を入力でき、候補を選ぶと同じ編集可能なテキスト値が更新されます。
オーバーレイの構成 パーマリンク
`Portal` はポップアップをコントロール外に配置し、`Positioner` が位置を合わせます。Escape キーで閉じるとフォーカスが戻ります。
キーボード選択 パーマリンク
入力して絞り込み、矢印キーでハイライトを移動し、Enter で確定します。Escape でポップアップを閉じます。
ネイティブフォームのリセット パーマリンク
リセットすると非制御の初期値が復元され、送信結果が消去されます。
API
@tinyrack/ui/components/autocomplete は、Root、Value、Trigger、Input、InputGroup、Icon、Clear、List、Status、Portal、Backdrop、Positioner、Popup、Arrow、Group、GroupLabel、Item、Row、Collection、Empty、Separator という Base UI の完全な構造をエクスポートします。InputAdornment は Tinyrack が提供する入力装飾パートです。InputGroup は uiSize?: 'md' | 'lg'(既定値 md) を受け取り、input、adornment、clear、trigger の高さを隣のコントロールと揃えます。各パートの名前付きエクスポートとプロパティ型に加え、Base UI の状態型、ルートアクション、イベント詳細、フィルター、フィルターオプションの型を TRAutocomplete* 名で利用できます。ロケールを考慮した照合には useAutocompleteFilter または TRAutocomplete.useFilter を使い、Root 内でフィルタリング済みのコレクションを読むには useAutocompleteFilteredItems または TRAutocomplete.useFilteredItems を使います。