Textareas are used to input multi-line text data
To render a textarea, apply the class a-input
to a textarea
.
<textarea class="a-input">
Sample text
</textarea>
<textarea class="a-input" disabled>
Sample text
</textarea>
<div class="m-form__item">
<label class="a-label" for="example">Label</label>
<textarea class="a-input" id="example">
Sample text
</textarea>
</div>
To add icons to a textarea, wrap the input in a div
using the class m-input__wrapper
.
Next, add the icon as a sibling of the textarea
and use an icon alignment utility class
(e.g. -icon--left
) to specify where it should be placed.
<div class="m-input__wrapper -icon--left">
<textarea class="a-input">
Sample text
</textarea>
<i class="a-icon icon-map-marker -text--muted"></i>
</div>
<div class="m-input__wrapper -icon--right">
<textarea class="a-input">
Sample text
</textarea>
<i class="a-icon icon-circle-question-outline -text--muted"></i>
</div>
<div class="m-input__wrapper -icon--left -icon--right">
<textarea class="a-input">
Sample text
</textarea>
<i class="a-icon icon-map-marker -text--muted"></i>
<i class="a-icon icon-check-alt -text--success"></i>
</div>
Textareas offer three validation states: -success
,
-warning
, and -danger
.
<textarea class="a-input -success">
Sample text
</textarea>
<div class="m-input__wrapper -icon--right">
<textarea class="a-input -success">
Sample text
</textarea>
<i class="a-icon icon-check-alt -text--success"></i>
</div>
<textarea class="a-input -warning">
Sample text
</textarea>
<div class="m-input__wrapper -icon--right">
<textarea class="a-input -warning">
Sample text
</textarea>
<i class="a-icon icon-warning -text--warning"></i>
</div>
<textarea class="a-input -danger">
Sample text
</textarea>
<div class="m-input__wrapper -icon--right">
<textarea class="a-input -danger">
Sample text
</textarea>
<i class="a-icon icon-circle-warning -text--danger"></i>
</div>
Textareas supports a full spectrum of sizes: -sm
, -md
,
-lg
, -xl
.
The default size is -md
.
<textarea class="a-input -sm">
Sample text
</textarea>
<textarea class="a-input -md">
Sample text
</textarea>
<textarea class="a-input -lg">
Sample text
</textarea>
<textarea class="a-input -xl">
Sample text
</textarea>