検索入力SearchInputBeta
検索アイコンとクリア操作を備えた検索入力欄です。
プレビュー
状態とバリエーション
クリア可能
入力済みの時だけクリアボタンを表示します。
クリアボタンなし
候補やフィルター側でリセットする検索欄では、クリアボタンを非表示にできます。
無効化
検索できない理由はツールチップと補足文で伝えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | string | - | 外部から渡す検索語です。 |
| onValueChange | (value: string) => void | - | 検索語が変わった時に呼ばれます。 |
| clearable | boolean | true | 入力済みの時にクリアボタンを表示します。 |
| clearLabel | string | 'Clear search' | クリアボタンの支援技術向けラベルです。 |
| placeholder | string | 'Search...' | 未入力時に表示する補助テキストです。 |
使い方
import { FormControl, FormGroup, FormLabel, SearchInput } from "@gunjo/ui";
<FormGroup className="w-full max-w-sm">
<FormLabel htmlFor="search">検索</FormLabel>
<FormControl>
<SearchInput
id="search"
value={query}
onValueChange={setQuery}
clearLabel="検索語をクリア"
/>
</FormControl>
</FormGroup>使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。