1. Design System
  2. Base
  3. Form elements
  4. Textarea

Textarea

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

Read the official Bulma documentation for form elements.

<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.