Standard Life Digital Framework

Input

full screen new window example HTML markup

The input element defines a form control for the user to enter single line input.

Usage

Place an input within a form. Each input 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 input element.

NOTE : For the input 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 input 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\single-input.hbs

Copy

<form>
    <div class="slb-form__group">
        <input type="text" class="[modifier class]" id="exampleInputText-[modifier class]" />
        <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-input.scss