ホーム/コンポーネント/フォームと入力/マルチセレクト MultiSelect

MultiSelect

タグ表示で複数選択できるセレクトコンポーネント。検索絞り込みとBackspaceで削除に対応。

import { MultiSelect } from "@blueai/ui"

Examples

With initial values

使用言語

TypeScriptGo

<MultiSelect
  value={["ts", "go"]}
  onChange={setValue}
  options={languages}
  label="使用言語"
/>

Empty with error

スキル必須

1つ以上選択してください

<MultiSelect
  value={[]}
  onChange={setValue}
  options={languages}
  label="スキル"
  error="1つ以上選択してください"
  required
/>

Prop	Type	Default	Description
value*	string[]	—	選択されたvalueの配列
onChange*	(value: string[]) => void	—	値変更コールバック
options*	MultiSelectOption[]	—	選択肢
label	string	—	ラベル
placeholder	string	—	プレースホルダー（デフォルト: 選択...）
error	string	—	エラーメッセージ
required	boolean	—	必須表示
disabled	boolean	—	無効状態

type MultiSelectOption = {
  value: string;
  label: string;
};