Textareas

v-0.0.0

Default

Textarea label

Content of the textarea's legend

<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="textareaId">
            Textarea label
        </label>
    </div>
    <div class="input__container">
        <textarea class="input" rows="2" id="textareaId" placeholder="Placeholder"
            name="textareaDefault"></textarea>
    </div>
    <p class="legend">Content of the textarea's legend</p>
</fieldset>

Validated

Textarea valid

Valid value

Content of the textarea's legend

<fieldset class="fieldset valid">
    <div class="label__container">
        <label class="label" for="textareaValidId">
            Textarea valid
        </label>
    </div>
    <div class="input__container">
        <textarea class="input" rows="2" id="textareaValid" placeholder="Placeholder"
            name="textareaNotValid">Valid value</textarea>
    </div>
    <p class="legend">Content of the textarea's legend</p>
</fieldset>

Error

Textarea not valid label

Invalid value

Error message

Content of the textarea's legend

<fieldset class="fieldset notValid">
    <div class="label__container">
        <label class="label" for="textareaNotValidId">
            Textarea not valid label
        </label>
    </div>
    <div class="input__container">
        <textarea class="input" rows="2" id="textareaNotValidId" placeholder="Placeholder" name="textareaNotValid">Invalid value</textarea>
    </div>
    <p class="feedback--error">Error message</p>
    <p class="legend">Content of the textarea's legend</p>
</fieldset>

Disabled

Textarea disabled label

Content of the textarea's legend

<fieldset class="fieldset">
    <div class="label__container">
        <label class="label" for="textareaDisabledId">
            Textarea disabled label
        </label>
    </div>
    <div class="input__container">
        <textarea disabled class="input" rows="2" id="textareaDisabledId" placeholder="Placeholder" name="textareaDisabled"></textarea>
    </div>
    <p class="legend">Content of the textarea's legend</p>
</fieldset>