Select Box Stable New filter feature New multi select 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
Select box with filter
Added in 3.4
Multi select with nested check boxes
Added in 3.2

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	–
filter-threshold	max number of items without showing the filter input	Number	7
theme	Set the color scheme of the component	`light`, `gray`, `dark`	`light`

Callback	Argument	Description
onOpen	–	Callback function that gets triggered when the option panel just opened
onClose	–	Callback function that gets triggered when the option panel just closed
onChange	value String	Callback function that gets triggered when an option is selected

Default Select box

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

Select box with filter

Added in 3.4

<uimc-select 
  label="Filter fruits…" 
  info="It’s your choice"
  filter-threshold="7"
  items='[{  "value": "Apple", "name": "Apple" },{  "value": "Banana", "name": "Banana" },{  "value": "Citron", "name": "Citron" },{  "value": "Lime", "name": "Lime" },{  "value": "Orange", "name": "Orange" },{  "value": "Pear", "name": "Pear" },{  "value": "Pineapple", "name": "Pineapple" },{  "value": "Plum", "name": "Plum" }]'>
</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>