Textareas are used to input multi-line text data
To render a textarea, apply the class a-input
to a textarea
.
<div class="m-form__item">
<label class="a-label" for="example__base">Label</label>
<textarea class="a-input" id="example__base">
Sample text
</textarea>
</div>
<div class="m-form__item">
<label class="a-label" for="example__disabled">Label</label>
<textarea class="a-input" id="example__disabled" disabled>
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-form__item">
<label class="a-label" for="example__icon-left">Label</label>
<div class="m-input__wrapper -icon--left">
<textarea class="a-input" id="example__icon-left">
Sample text
</textarea>
<i class="a-icon icon-map-marker -text--muted"></i>
</div>
</div>
<div class="m-form__item">
<label class="a-label" for="example__icon-right">Label</label>
<div class="m-input__wrapper -icon--right">
<textarea class="a-input" id="example__icon-right">
Sample text
</textarea>
<i class="a-icon icon-circle-question-outline -text--muted"></i>
</div>
</div>
<div class="m-form__item">
<label class="a-label" for="example__icon-left-right">Label</label>
<div class="m-input__wrapper -icon--left -icon--right">
<textarea class="a-input" id="example__icon-left-right">
Sample text
</textarea>
<i class="a-icon icon-map-marker -text--muted"></i>
<i class="a-icon icon-check -text--success"></i>
</div>
</div>
Textareas offer three validation states: -success
,
-warning
, and -danger
.
<div class="m-form__item">
<label class="a-label" for="example__success">Label</label>
<textarea class="a-input -success" id="example__success">
Sample text
</textarea>
</div>
<div class="m-form__item">
<label class="a-label" for="example__success-icon">Label</label>
<div class="m-input__wrapper -icon--right">
<textarea class="a-input -success" id="example__success-icon">
Sample text
</textarea>
<i class="a-icon icon-check -text--success"></i>
</div>
</div>
<div class="m-form__item">
<label class="a-label" for="example__warning">Label</label>
<textarea class="a-input -warning" id="example__warning">
Sample text
</textarea>
</div>
<div class="m-form__item">
<label class="a-label" for="example__warning-icon">Label</label>
<div class="m-input__wrapper -icon--right">
<textarea class="a-input -warning" id="example__warning-icon">
Sample text
</textarea>
<i class="a-icon icon-warning -text--warning"></i>
</div>
</div>
<div class="m-form__item">
<label class="a-label" for="example__danger-icon">Label</label>
<textarea class="a-input -danger" id="example__danger">
Sample text
</textarea>
</div>
<div class="m-form__item">
<label class="a-label" for="example__danger-icon">Label</label>
<div class="m-input__wrapper -icon--right">
<textarea class="a-input -danger" id="example__danger-icon">
Sample text
</textarea>
<i class="a-icon icon-circle-warning -text--danger"></i>
</div>
</div>
Textareas support the following sizes: -sm
, -md
,
-lg
, -xl
.
The default size is -md
.
<div class="m-form__item">
<label class="a-label" for="example__sm">Label</label>
<textarea class="a-input -sm" id="example__sm">
Sample text
</textarea>
</div>
<div class="m-form__item">
<label class="a-label" for="example__md">Label</label>
<textarea class="a-input -md" id="example__md">
Sample text
</textarea>
</div>
<div class="m-form__item">
<label class="a-label" for="example__lg">Label</label>
<textarea class="a-input -lg" id="example__lg">
Sample text
</textarea>
</div>
<div class="m-form__item">
<label class="a-label" for="example__xl">Label</label>
<textarea class="a-input -xl" id="example__xl">
Sample text
</textarea>
</div>