Select Box Stable New variant Dark Theme

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

Select box for a single selection
Multi select with nested check boxes

Select box for a single selection

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

Attribute	Description	Values	Default
label	Label text inside the select box	String	–
info	Hint text below the select box should change according to the validity state	String	–
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

Default 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>

Multi select with nested check boxes

Added in 3.2

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

Attribute	Description	Values	Default
label	Label text inside the select box	String	–
info	Hint text below the select box should change according to the validity state	String	–
valid	Reflects valid state	–	–
invalid	Reflects invalid state	–	–
disabled	Disables interactions on this element	–	–
items	Flat list of options to select from	Array of Objects	–
theme	Set the color scheme of the component	`light`, `gray`, `dark`	`light`

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

Multi Select Example

<uimc-multi-select 
  label="Choose fruits…" 
  info="Multiple options possible"
  items='[{ "hasChildren": true, "value": "Apples", "name": "Apples" },{ "parent": "Apples", "value": "Gala", "name": "Gala" },{ "parent": "Apples", "value": "Golden Delicious", "name": "Golden Delicious" },{ "isChecked": true, "parent": "Apples", "value": "Pink Lady", "name": "Pink Lady" },{ "hasChildren": true, "value": "Pears", "name": "Pears" },{ "isChecked": true, "parent": "Pears", "value": "Williams Christ", "name": "Williams Christ" },{ "isChecked": true, "parent": "Pears", "value": "Anjou", "name": "Anjou" },{ "value": "Cherry", "name": "Cherry" }]' theme=light>
</uimc-multi-select>