Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Form components

Select

A form control for selecting an option from a list.

Usage 

arrow_drop_down
This is an optional caption 
<ui:Select caption="This is an optional caption">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</ui:Select>

Validation states 

arrow_drop_down
cancel Not available in your country
arrow_drop_down
check Available in your country
arrow_drop_down
progress_activity 
<div class="row">
  <ui:Select label="Invalid" invalid="Not available in your country">
    <option >Iran</option>
  </ui:Select>
  <ui:Select label="Valid" valid="Available in your country">
    <option>Perú</option>
  </ui:Select>
</div>
<div class="row">
  <ui:Select label="Disabled" disabled>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </ui:Select>
  <ui:Select label="Loading" loading>
    <option>Option 1</option>
    <option>Option 2</option>
    <option selected>Option 3</option>
    <option>Option 4</option>
  </ui:Select>
</div>

Sizes 

arrow_drop_down
Default size
arrow_drop_down
Large size
arrow_drop_down
Block default
arrow_drop_down
Block large 
<div class="row">
  <ui:Select label="Label" caption="Default size">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </ui:Select>
  <ui:Button>Reference</ui:Button>
</div>
<div class="row">
  <ui:Select label="Label" caption="Large size" size="large">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </ui:Select>
  <ui:Button size="large">Reference</ui:Button>
</div>
<div class="row">
  <ui:Select label="Label" caption="Block default" block>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </ui:Select>
</div>
<div class="row">
  <ui:Select label="Label" caption="Block large" size="large" block>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </ui:Select>
</div>

Component arguments 

Select 

ArgumentTypeDescription
label str Required. Label for the select.
id str Optional. ID of the select. Automatically generated if not set.
caption str Optional. Caption for the select.
size str Optional. Size of the select. Can be "medium" or "large".
block bool Optional. If true, the select will take the full width of its parent.
required bool Optional. If true, the select will be marked as required.
disabled bool Optional. If true, the select will be disabled.
loading bool Optional. If true, the select will show a loading spinner.
valid str Optional. Positive validation message to show below the select.
invalid str Optional. Negative validation message to show below the select.
placeholder str Optional. If set, an empty option will be shown first with this text.

Components 

Component
File
Source
Select
select.jinja
select.css
form-field.css