セレクトボックス

セレクトボックスはオプションから選択して入力するコンポーネントです。プロパティ設定によっては複数選択も可能です。

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
ラベル	文字列		Select
幅	文字列		222
高さ	文字列		55
X	文字列
Y	文字列
スタイル	選択	• アウトライン • フィル • スタンダード	アウトライン
色	文字列カラーピッカー
背景色	文字列カラーピッカー
ラベル色	文字列カラーピッカー
入力文字色	文字列カラーピッカー
非アクティブ	真偽	• オン • オフ	オフ
読み取り専用	真偽	• オン • オフ	オフ
必須	真偽	• オン • オフ	オフ
表示	真偽	• オン • オフ	オン
複数選択	真偽	• オン • オフ	オフ
ヘルパーテキスト	文字列
オプション	表形式詳細1		[{“label”:“label1”,“value”:“value1”},{“label”:“label2”,“value”:“value2”}]
チェンジイベント	選択	• なし • アクション	なし

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
ラベル	label	string		Select
幅	width	string		222
高さ	height	string		55
X	x	string
Y	y	string
スタイル	variant	string	• outlined • filled • standard	outlined
色	color	string
背景色	backgroundColor	string
ラベル色	labelColor	string
入力文字色	inputColor	string
非アクティブ	disabled	boolean	• true • false	false
読み取り専用	readOnly	boolean	• true • false	false
必須	required	boolean	• true • false	false
表示	visibility	boolean	• true • false	true
複数選択	multiple	boolean	• true • false	false
ヘルパーテキスト	helperText	string
オプション	options	array of object		[{“label”:“label1”,“value”:“value1”},{“label”:“label2”,“value”:“value2”}]
値	value	string、またはarray of string（上記Tips参照）
エラー	error	boolean

[id]プロパティはアクションで設定はできません。
[オプション]はフィールド右上のアイコンからダイアログが起動します。
[幅]、[高さ]プロパティ値には下記を入力できます。
px表示したい場合は数値のみ、%表示したい場合は単位に%を指定してください。
下記以外を入力した場合の動作はサポート外になります。
- 数値
- 数値%
- calc()関数
[X]、[Y]プロパティ値には下記を入力できます。
px表示したい場合は数値のみを指定してください。
下記以外を入力した場合の動作はサポート外になります。
- 数値
- calc()関数
calc()関数はCSSの関数で、計算を可能にする関数です。（例：calc(100% - 30px)）
calc()関数で使用できる単位は「%」と「px」です。それ以外の単位（例：em,remなど）はサポート外になります。
calc()関数を用いてサイズを指定した際は、エディタ上の表示とアプリ上の見た目が異なることがあります。
プレビューを用いてご確認ください。
[必須]プロパティをONにした場合、ラベルの横に * マークが付きます。
必須チェックは自動では行いませんので、アクションを定義してください。

デフォルトの状態は以下のように登録されています。[ADD]ボタンから[Label]と[Value]の組を登録します。削除する場合は、チェックボックスを選択して、[DELETE]ボタンをクリックします。

選択	Label	Value
チェックボックス	label1	value1
チェックボックス	label2	value2

イベント

イベント名	説明
onchange	値の変更が行われた時に発生します。