Select
Selectは、選択肢をドロップダウンメニューで表示するコンポーネントです。
プロパティ
Selectは、以下のプロパティをサポートしています。
名前 | 型 | デフォルト値 | 説明 |
---|---|---|---|
options |
SelectOptionItem[] |
なし | 選択肢の配列です。 |
placeholder |
string |
なし | セレクトボックスが空のときに表示されるプレースホルダーテキストです。 |
disabled |
boolean |
false |
セレクトボックスを無効化します。無効化されたセレクトボックスは選択できません。 |
isError |
boolean |
false |
エラー状態を視覚的に示します。バリデーション用など。 |
SelectOptionItem
SelectOptionItemは、各選択肢の情報を表すオブジェクトです。
名前 | 型 | デフォルト値 | 説明 |
---|---|---|---|
label |
string |
なし | 選択肢のラベルです。 |
value |
string |
なし | 選択肢の値です。 |
インストールの手順
以下のコンポーネントのコードを、使いたいプロジェクトにコピー&ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。
使い方
サンプル
Default
特に操作が行われていない、デフォルトの状態です。
Error
選択内容に問題があり、エラーが表示されている状態です。
Disabled
利用不可の状態です。
Scroll
選択肢が一定量以上ある場合は、上下にスクロールボタンが表示されます。