Select

Selectは、選択肢をドロップダウンメニューで表示するコンポーネントです。

プロパティ

Selectは、以下のプロパティをサポートしています。

名前 デフォルト値 説明
options SelectOptionItem[] なし 選択肢の配列です。
placeholder string なし セレクトボックスが空のときに表示されるプレースホルダーテキストです。
disabled boolean false セレクトボックスを無効化します。無効化されたセレクトボックスは選択できません。
isError boolean false エラー状態を視覚的に示します。バリデーション用など。

SelectOptionItem

SelectOptionItemは、各選択肢の情報を表すオブジェクトです。

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

インストールの手順

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

使い方


サンプル

Default

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

Error

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

Disabled

利用不可の状態です。

Scroll

選択肢が一定量以上ある場合は、上下にスクロールボタンが表示されます。