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

Text Input

Used to set a value that is a single line of text.

Usage 

Hi, I'm a caption. 
<ui:Input label="Greeting" caption="Hi, I'm a caption." placeholder="Hello world!" />

Validation states 

cancel Username cannot have spaces
check Username is available
progress_activity 
<div class="row">
  <ui:Input label="Invalid state" value="qwer ty" invalid="Username cannot have spaces" />
  <ui:Input label="Valid state" value="qwerty" valid="Username is available" />
</div>
<div class="row">
  <ui:Input label="Loading state" value="qwerty" loading />
  <ui:Input label="Disabled state" value="qwerty" disabled />
</div>

Caption 

A helper text
A maybe longer caption with optional HTML code. See details (not really). 
<div class="row">
  <ui:Input label="A label" caption="A helper text" size="large"/>
</div>
<div class="row">
  <ui:Input label="A label" size="large">A maybe longer caption with optional <em> HTML code</em>. <a href="#">See details</a> (not really).</ui:Input>
</div>
<div class="row">
  <ui:Input label="A long label that will be truncated in most cases" />
</div>

Leading / Trailing visuals 

attach_money
lock
USD
minutes
search progress_activity
progress_activity
mail
minutes 
<div class="row">
  <ui:Input label="Leading icon" leading="attach_money" />
  <ui:Input label="Trailing icon" trailing="lock" />
</div>
<div class="row">
  <ui:Input label="Leading text" leading-text="USD" />
  <ui:Input label="Trailing text" trailing-text="minutes" />
</div>
<div class="row">
  <ui:Input label="Leading icon and loading" leading="search" loading />
  <ui:Input label="Trailing replaced by loading" trailing-text="minutes" loading />
</div>
<div class="row">
  <ui:Input label="Disabled leading icon" leading="mail" value="juanpablo@example.com" disabled />
  <ui:Input label="Disabled trailing text" trailing-text="minutes" value="1'234" disabled />
</div>

Sizes 

Default size
Large size
Block default
search progress_activity
Block large 
<div class="row">
  <ui:Input label="Label" caption="Default size" />
  <ui:Button>Reference</ui:Button>
</div>
<div class="row">
  <ui:Input label="Label" caption="Large size" size="large" />
  <ui:Button size="large">Reference</ui:Button>
</div>
<div class="row">
  <ui:Input label="Label" caption="Block default" block />
</div>
<div class="row">
  <ui:Input label="Label" caption="Block large" size="large" leading="search" block loading />
</div>

Counters 

If countermin or countermax are set, a counter will be shown.

check Some validation message This is a caption
0 / 20
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
0 / 5 - 20
0 / 20
<div class="row">
  <ui:Input
    countermax="20"
    label="Warn after 20 chars"
    valid="Some validation message"
    caption="This is a caption"
    block
  />
</div>
<div class="row">
  <ui:Input
    countermin="5"
    countermax="20"
    label="Warn before 5 and after 20 chars"
    caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    block
  />
</div>
<div class="row">
  <ui:Input
    countermax="20"
    maxlength="30"
    label="Warn after 20 chars and block at 30"
    value="Minim laboris magna deserunt"
    block
  />
</div>

Component arguments 

Input 

ArgumentTypeDescription
label str Required. Label for the input.
id str Optional. ID of the input. Automatically generated if not set.
type str Optional. Type of the input. Default is "text".
caption str Optional. Caption for the input.
size str Optional. Size of the input. Can be "medium" or "large".
block bool Optional. If true, the input will take the full width of its parent.
required bool Optional. If true, the input will be marked as required.
disabled bool Optional. If true, the input will be disabled.
loading bool Optional. If true, the input will show a loading spinner.
valid str Optional. Positive validation message to show below the input.
invalid str Optional. Negative validation message to show below the input.
countermin int Optional. Minimum value for the counter.
countermax int Optional. Maximum value for the counter.
leading str Optional. Name of the Material Symbol icon to show before the input.
leading_text str Optional. Text to show instead of the leading icon.
trailing str Optional. Name of the Material Symbol icon to show after the input.
trailing_text str Optional. Text to show instead of the trailing icon.

Components 

Component
File
Source
Input
input.jinja
input.css
form-field.css