SearchableSelect

Single choice with search, for long option lists.

Single choice with a search box, for when there are too many options to scan in Select. Pass onSearch to search on the server instead.

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[]

The options; an array of groups adds headings.

TypeSelectOption[] | SelectOptionGroup[]

value?string

The selected value.

Typestring

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

Fired on change.

Type(value: string | undefined) => void

onSearch?(query: string) => void

Called on every keystroke — for server-side search.

Type(query: string) => void

clearable?boolean

Allow clearing the selection.

Typeboolean

isLoading?boolean

Options are being fetched.

Typeboolean

placeholder?string

Trigger text before anything is chosen.

Typestring

searchPlaceholder?string

Placeholder for the search box.

Typestring

emptyText?string

Shown when nothing matches.

Typestring

disabled?boolean

Disable interaction.

Typeboolean

Searching on the server

Pass onSearch and replace options yourself. Filtering becomes the server’s job, so hand back whatever it returns.

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}
/>;

To allow several selections, use MultiSelect.