Select Box Stable

A Select Box is an input field that provides a list of options from which the user chooses a value. They are typically used in forms.

Usage Code

<uimc-select 
  label="" 
  info=""
  items='[]'>
</uimc-select>

Attribute	Description	Values	Default
label	Label text inside the select box
info	Hint text below the select box should change according to the validity state
valid	Reflects valid state	–	–
invalid	Reflects invalid state	–	–
disabled	Disables interactions on this element	–	–
items	Options to select from	Array of Objects	–

Callback	Argument	Description
onChange	event	Callback function that gets triggered if the state of the component changes

Select box

<uimc-select 
  label="Fruit…" 
  info="It’s your choice"
  items='[{  "value": "Lime", "name": "Lime" },{  "value": "Orange", "name": "Orange" },{  "value": "Banana", "name": "Banana" }]'>
</uimc-select>

Select box valid state

<uimc-select 
  valid
  label="Fruit…" 
  info="Yes, orange is a great choice."
  items='[{  "value": "Lime", "name": "Lime" },{ "isSelected": true, "value": "Orange", "name": "Orange" },{  "value": "Banana", "name": "Banana" }]'>
</uimc-select>

Select box invalid state

<uimc-select 
  invalid
  label="Fruit…" 
  info="No, this is not a fruit."
  items='[{  "value": "Lime", "name": "Lime" },{  "value": "Orange", "name": "Orange" },{ "isSelected": true, "value": "Red", "name": "Red" }]'>
</uimc-select>