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

Textarea

Textarea is used to set a value that is multiple lines of text.

Usage 

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

Validation states 

cancel Something went wrong
check Success 
<div class="row">
  <ui:Textarea label="Invalid state" invalid="Something went wrong"> </ui:Textarea>
  <ui:Textarea label="Valid state" valid="Success"></ui:Textarea>
</div>
<div class="row">
  <ui:Textarea label="Disabled state" value="qwerty" disabled></ui:Textarea>
</div>

Sizes 

Large size
Block 
<div class="row">
  <ui:Textarea label="Label" caption="Large size" size="large"></ui:Textarea>
</div>
<div class="row">
  <ui:Textarea label="Label" caption="Block" block></ui:Textarea>
</div>

Counter 

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

check Some validation message This is a caption
0 / 40
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
0 / 10 - 40
0 / 40
<div class="row">
  <ui:Textarea
    countermax="40"
    label="Warn after 40 chars"
    valid="Some validation message"
    caption="This is a caption"
    rows="2"
    block
  ></ui:Textarea>
</div>
<div class="row">
  <ui:Textarea
    countermin="10"
    countermax="40"
    label="Warn before 10 and after 40 chars"
    caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    rows="2"
    block
  ></ui:Textarea>
</div>
<div class="row">
  <ui:Textarea
    countermax="40"
    maxlength="50"
    label="Warn after 40 chars and block at 50"
    rows="2"
    block
  >Minim laboris magna deserunt veniam id est</ui:Textarea>
</div>

Component arguments 

Textarea 

ArgumentTypeDescription
label str Required. Label for the textarea.
id str Optional. ID of the textarea. Automatically generated if not set.
caption str Optional. Caption for the textarea.
size str Optional. Size of the textarea. Can be "medium" or "large".
block bool Optional. If true, the textarea will take the full width of its parent.
required bool Optional. If true, the textarea will be marked as required.
disabled bool Optional. If true, the textarea will be disabled.
loading bool Optional. If true, the textarea will show a loading spinner.
valid str Optional. Positive validation message to show below the textarea.
invalid str Optional. Negative validation message to show below the textarea.
countermin int Optional. Minimum value for the counter.
countermax int Optional. Maximum value for the counter.

Components 

Component
File
Source
Textarea
textarea.jinja
form-field.css