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
入力内容に該当する項目が存在しない場合、表示されます。