検索入力SearchInputBeta

検索アイコンとクリア操作を備えた検索入力欄です。

プレビュー

入力すると検索語が反映され、クリアボタンで消せます。

状態とバリエーション

クリア可能

入力済みの時だけクリアボタンを表示します。

検索語: "バナー"

クリアボタンなし

候補やフィルター側でリセットする検索欄では、クリアボタンを非表示にできます。

検索語: "画像"

無効化

検索できない理由はツールチップと補足文で伝えます。

更新が完了すると検索できます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
valuestring-外部から渡す検索語です。
onValueChange(value: string) => void-検索語が変わった時に呼ばれます。
clearablebooleantrue入力済みの時にクリアボタンを表示します。
clearLabelstring'Clear search'クリアボタンの支援技術向けラベルです。
placeholderstring'Search...'未入力時に表示する補助テキストです。

使い方

import * as React from "react";
import { FormControl, FormGroup, FormLabel, SearchInput } from "@gunjo/ui";

export function AssetSearchField() {
  const [query, setQuery] = React.useState("");

  return (
    <FormGroup className="w-full max-w-sm">
      <FormLabel htmlFor="search">検索</FormLabel>
      <FormControl>
        <SearchInput
          id="search"
          value={query}
          onValueChange={setQuery}
          clearLabel="検索語をクリア"
        />
      </FormControl>
    </FormGroup>
  );
}

使用コンポーネント

SearchInputInputButtonFormGroup

関連コンポーネント

InputComboboxCommandFilterButton

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: SearchInput検索とフィルタ (Search & Filter)