Textarea

A UI component for forms where users need to enter multiple lines of text.

        Label
        * Required
    Support text
* Error text

<div class="form-group">
    <label for="test" class="form-label">
        Label
        <span class="form-necessity">* Required</span>
    </label>
    <div class="form-support">Support text</div>
    <textarea id="test" class="textarea"></textarea>
    <div class="form-error">* Error text</div>
</div>

HTML Attributes

Disabled

Adding the disabled attribute will gray out the input.

<textarea class="textarea" disabled></textarea>

Read-only

Using readonly will apply a specific design.

<textarea class="textarea" readonly></textarea>

Validation and Feedback

Feedback design after validating user input.

Error

Simply add the is-error class.

<textarea class="textarea is-error"></textarea>

Using form-group allows you to display error text at the same time.

        Label
        * Required
    Support text
* Error text

<div class="form-group">
    <label for="test" class="form-label">
        Label
        <span class="form-necessity">* Required</span>
    </label>
    <div class="form-support">Support text</div>
    <textarea id="test" class="textarea is-error"></textarea>
    <div class="form-error">* Error text</div>
</div>

Character Count Counter

JavaScript is required. Specify the custom element with is=“au-textarea” to use the character count counter.

        Label
        *Required
    Support text
＊Error text

<div class="form-group">
    <label for="test" class="form-label">
        Label
        <span class="form-necessity">*Required</span>
    </label>
    <div class="form-support">Support text</div>
    <textarea is="au-textarea" id="test" class="textarea"></textarea>
    <div class="form-error">＊Error text</div>
</div>