MultiSelect

検索できる複数選択。選択はチップで表示。

検索欄付きの複数選択です。選んだものはトリガーにチップとして並び、maxCount を超えた分は「+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[]

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

TypeSelectOption[] | SelectOptionGroup[]

value?string[]

選択中の値。

Typestring[]

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

変更時。

Type(value: string[]) => void

maxCount?number

チップとして並べる上限。超えた分は「+N」になる。

Typenumber

onSearch?(query: string) => void

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

Type(query: string) => void

isLoading?boolean

候補を取得中。

Typeboolean

placeholder?string

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

Typestring

searchPlaceholder?string

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

Typestring

emptyText?string

0 件のときの表示。

Typestring

disabled?boolean

操作を無効にする。

Typeboolean

フィルタ行の中で使うなら、FilterBar の FilterBarMultiSelect が値の受け渡しまで面倒を見てくれます。