Standard Life Digital Framework

Textarea

full screen new window example HTML markup

The textarea element defines a form control for the user to enter multiple rows of text.

Usage

Place a textarea within a form. Each textarea must have an associated label. The label for attribute must be identical to the input id attribute.

The label element must be directly underneath the textarea element.

NOTE : For the textarea label to stay up after entering text and unfocussed, this requires JavaScript, this can be done with the JavaScript support class slb-show

Modifier selectors

Modifier selector	Description
`slb-form__control`	Default form Radio button.
`slb-form__control-block`	Block form Radio button.

JavaScript Support

JavaScript Support class name	Description
`slb-show`	Add this class to the textarea element and the label will stay in its active position.

.slb-form__control - Default form control.

.slb-form__control-block - Block form control.

Markup: forms\textarea-input.hbs

Copy

<form>
    <div class="slb-form__group">
        <textarea class="[modifier class]" id="exampleInputText-[modifier class]" rows="3"></textarea>
        <label class="slb-form__label" for="exampleInputText-[modifier class]">Input Label</label>
        <span class="slb-form__bar"></span>
    </div>
</form>

Source: components/forms/_form-control-textarea.scss