kaze風
Search
検索入力
プレビュー
⌘K
使いどころ
使う場面
- 一覧や画面内を絞り込む、1 行の検索ボックス
- Enter で検索を確定する場面は onSearch、打つたびに絞り込む場面は onValueChange を使い分ける
- ショートカットを案内するときは shortcut に "⌘K" のように書く。表示だけで、キー自体は利用側で割り当てる
使わない場面
- 操作の呼び出しや画面移動を兼ねる検索。CommandPalette を使う
- 選択肢から 1 つ選ぶ入力。候補が多いときは Combobox を使う
- フォームの一般的な文字入力。Input を使う
使い方
<Search placeholder="検索..." shortcut="⌘K" onSearch={handleSearch} />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
placeholder | string | なし | プレースホルダーテキスト |
shortcut | string | なし | キーボードショートカットの表示テキスト |
onSearch | (value: string) => void | なし | 検索テキスト変更時のコールバック |
value | string | なし | 入力値（制御） |
defaultValue | string | なし | 初期値（非制御） |
onValueChange | (value: string) => void | なし | 入力値が変わるたびに呼ばれる |
aria-label | string | なし | アクセシビリティ用のラベル |
inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> | なし | 内側の input に渡す属性（name、disabled、autoComplete、onBlur など） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | 検索ボックスにフォーカスを移す |
| Enter | onSearch を呼ぶ。日本語入力の変換確定中は呼ばない |
アクセシビリティ
- 外側が role="search" のランドマークになり、スクリーンリーダーで検索領域へ移動できる
- 虫眼鏡アイコンは aria-hidden で、ショートカット表示（kbd）も読み上げない
- aria-label を省くと placeholder が入力欄の名前になる。placeholder を変えるときは名前として通じる言葉にし、ページ内に検索が複数あるなら aria-label で区別する
文言
- placeholder は「注文を検索」「メンバーを探す」のように、何を探せるかを書く。「検索」だけは対象が分からない
- 検索結果がないときは、空の状態を EmptyState で示し、条件を変える方法を伝える