SearchableSelect

検索できる単一選択。候補が多いときに。

検索欄の付いた単一選択です。候補が多くて Select では探しづらいときに使います。onSearch を渡せばサーバー側検索にもできます。

export const client = "only";

import { useState } from "react";
import { SearchableSelect } from "@squadbase/vantage/components";

const options = [
  {
    label: "東日本",
    options: [
      { value: "hokkaido", label: "北海道" },
      { value: "tohoku", label: "東北" },
      { value: "kanto", label: "関東" },
    ],
  },
  {
    label: "西日本",
    options: [
      { value: "kansai", label: "関西" },
      { value: "chugoku", label: "中国" },
      { value: "kyushu", label: "九州" },
    ],
  },
];

export default function Example() {
  const [value, setValue] = useState<string | undefined>("kanto");
  return (
    <SearchableSelect
      className="w-64"
      options={options}
      value={value}
      onChange={setValue}
      placeholder="地域を選ぶ"
      searchPlaceholder="地域名で検索"
      clearable
    />
  );
}

import { SearchableSelect } from "@squadbase/vantage/components";
import type { SelectOption, SelectOptionGroup } from "@squadbase/vantage/components";

PropType

options?SelectOption[] | SelectOptionGroup[]

候補。グループ配列を渡すと見出し付きになる。

TypeSelectOption[] | SelectOptionGroup[]

value?string

選択中の値。

Typestring

onChange?(value: string | undefined) => void

変更時。

Type(value: string | undefined) => void

onSearch?(query: string) => void

入力のたびに呼ばれる。サーバー側検索に使う。

Type(query: string) => void

clearable?boolean

選択解除できるようにする。

Typeboolean

isLoading?boolean

候補を取得中。

Typeboolean

placeholder?string

未選択時のトリガー表示。

Typestring

searchPlaceholder?string

検索欄のプレースホルダ。

Typestring

emptyText?string

0 件のときの表示。

Typestring

disabled?boolean

操作を無効にする。

Typeboolean

サーバー側で検索する

onSearch を渡して options を差し替えます。絞り込みはサーバーの仕事になるので、返ってきた候補をそのまま渡してください。

const [query, setQuery] = useState("");
const { data, isFetching } = useQuery({
  queryKey: ["customers", query],
  queryFn: () => apiFetch(`/api/customers?q=${query}`).then((r) => r.json()),
});

<SearchableSelect
  options={data ?? []}
  onSearch={setQuery}
  isLoading={isFetching}
  value={value}
  onChange={setValue}
/>;

複数選べるようにしたいときは MultiSelect を使います。