Combobox

Comboboxは、入力フィールドと候補リストを組み合わせて、ユーザーがテキスト入力または候補の選択によって値を指定できるコンポーネントです。
検索やフィルタリングによって、効率的に目的の項目を探すことができます。

プロパティ

名前 デフォルト値 説明
options ComboboxOption[] 選択肢の配列です。
placeholder string プレースホルダー 入力欄のプレースホルダーです。
disabled boolean false コンボボックスを無効化します。無効化されたコンボボックスは選択できません。
isError boolean false エラー状態を視覚的に示します。バリデーション用など。
multi boolean false true にすると複数選択が可能になります。
open boolean false コンボボックスの候補リストの開閉状態を制御します。

ComboboxOptionItem

名前 デフォルト値 説明
label string 選択肢のラベルです。
value string | number 選択肢の値です。

インストールの手順

以下のコンポーネントのコードを、使いたいプロジェクトにコピー&ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。

依存コンポーネント

Comboboxを使うときは、以下のコンポーネントもダウンロードが必要です。

使い方


サンプル

Default

特に操作が行われていない、デフォルトの状態です。

Error

選択内容に問題があり、エラーが表示されている状態です。

Disabled

利用不可の状態です。

Multi

複数選択できます。

Empty

入力内容に該当する項目が存在しない場合、表示されます。