Skip to content

Textarea13.10.5

The Textarea component is for large text inputs.


$ npm i @if-design-system/textarea@13.10.5

Edit this section

Usage

Principles

Sizing

By default, the Textarea has a max width of 504px, but you can use the .full modifier for it to use the size of the container.

Full

Use the .full-class to let the textarea grown 100% of container size.

Full width Textarea
Edit this section

Behaviours

Operational states

Static
When typing (Focused with value)
Complete
Invalid with no value

For example a required field.

Invalid with value

For example wrong value.

Interactions

Focus

Focus

Modifiers

Disabled

Disabled

Full

Use the .full-class to let the textarea grown 100% of container size.

Full width text area
<form autocomplete="off" style="width: 80%;">
  <div class="if input-wrapper">
    <textarea name="input-fields-text-area-index-full" class="if textarea full"></textarea>
    <label for="input-fields-text-area-index-full" class="if"></label>
  </div>
</form>
Edit this section

Anatomy

Textarea
  1. Textarea
Edit this section

Specs

Textarea
Edit this section

Implementation

<form autocomplete="off">
  <div class="if input-wrapper">
    <textarea name="<identifier>" id="<identifier>" class="if textarea [full]"></textarea>
    <label for="<identifier>" class="if">Textarea</label>
  </div>
</form>
Edit this section
Contact us