MultiSelect

Multiple choice with search; selections show as chips.

Multiple choice with a search box. Selections appear as chips on the trigger, and anything past maxCount collapses into a “+N”.

export const client = "only";

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

const options = [
  { value: "active", label: "有効" },
  { value: "pending", label: "保留" },
  { value: "inactive", label: "停止" },
  { value: "error", label: "エラー" },
];

export default function Example() {
  const [value, setValue] = useState(["active", "pending"]);
  return (
    <MultiSelect
      className="w-72"
      options={options}
      value={value}
      onChange={setValue}
      placeholder="状態で絞り込む"
      maxCount={2}
    />
  );
}

import { MultiSelect } 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 values.

Typestring[]

onChange?(value: string[]) => void

Fired on change.

Type(value: string[]) => void

maxCount?number

How many chips to show before collapsing to "+N".

Typenumber

onSearch?(query: string) => void

Called on every keystroke — for server-side search.

Type(query: string) => void

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

Inside a filter row, FilterBar’s FilterBarMultiSelect handles the value plumbing for you.