Close

Textarea

Textareas are for long form text inputs. They can be scaled up or down in size by the user, in browsers that support the feature.

<form>
    <div class="field">
        <label class="label" for="address">Enter your address</label>
        <div class="control">
            <textarea id="address" name="addresstext" class="textarea"></textarea>
        </div>
    </div>
</form>

Usage

The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.

Each of them should be wrapped in a .control container.

When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

Accessibility

Use the <label> element to associate text and <textarea> form control.

Using <fieldset> and <legend> ensures that the text description is read to screen reader users when the grouping is navigated to.

Fieldset and legend should only be used to associate groups of controls when a higher level description is necessary.

If you have any questions or suggestions for improvements, please contact the Web Team.