Standard Life Digital Framework

Input Group

full screen new window example HTML markup

An input group is an add-on to an input field to give more content to the input.

Usage

Place the addon before or after an input adding any contextual information you need, for example a currency sign for a currency input filed.

Use the modifiers to increase the space before the prepended label for larger addons like phone extensions or text.

Modifier selectors

Modifier selector	Description
`slb-form__control-group-prepend--md`	Medium prepended gap between the input.
`slb-form__control-group-prepend--lg`	Large prepended gap between the input.
`slb-form__control-group-prepend--xl`	Extra Large prepended gap between the input.

Default prepend - Currency Input group example

Input Label

Medium prepend - Currency Input group example

Input Label

Large prepend - Phone Input group example

+44

Input Label

+44

Input Label

Extra Large prepend - Text Input group example

Input Label

Default append - Percentage Input group example

Input Label

Markup: forms\group-input.hbs

Copy

<form>
    <fieldset>
        <legend><strong>Default prepend</strong> - Currency Input group example</legend>
        <div class="slb-form__group">
            <div class="slb-form__control-group">
                <div class="slb-form__control-group-prepend">
                    <span>£</span>
                </div>
                <input type="number" class="slb-form__control" id="exampleInputText-slb-form__control" />
                <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
            </div>
        </div>
        <div class="slb-form__group">
            <div class="slb-form__control-group">
                <div class="slb-form__control-group-prepend-block">
                    <span>£</span>
                </div>
                <input type="number" class="slb-form__control-block" id="exampleInputText-slb-form__control" />
                <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend><strong>Medium prepend</strong> - Currency Input group example</legend>
        <div class="slb-form__group">
            <div class="slb-form__control-group">
                <div class="slb-form__control-group-prepend slb-form__control-group-prepend--md">
                    <span>£</span>
                </div>
                <input type="number" class="slb-form__control" id="exampleInputText-slb-form__control" />
                <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
            </div>
        </div>
        <div class="slb-form__group">
            <div class="slb-form__control-group">
                <div class="slb-form__control-group-prepend-block slb-form__control-group-prepend--md">
                    <span>£</span>
                </div>
                <input type="number" class="slb-form__control-block" id="exampleInputText-slb-form__control" />
                <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend><strong>Large prepend</strong> - Phone Input group example</legend>
        <div class="slb-form__group">
            <div class="slb-form__control-group">
                <div class="slb-form__control-group-prepend slb-form__control-group-prepend--lg">
                    <span>+44</span>
                </div>
                <input type="number" class="slb-form__control" id="exampleInputText-slb-form__control" />
                <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
            </div>
        </div>
        <div class="slb-form__group">
            <div class="slb-form__control-group">
                <div class="slb-form__control-group-prepend-block slb-form__control-group-prepend--lg">
                    <span>+44</span>
                </div>
                <input type="number" class="slb-form__control-block" id="exampleInputText-slb-form__control" />
                <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend><strong>Extra Large prepend</strong> - Text Input group example</legend>
        <div class="slb-form__group">
            <div class="slb-form__control-group">
                <div class="slb-form__control-group-prepend slb-form__control-group-prepend--xl">
                    <span>Search</span>
                </div>
                <input type="text" class="slb-form__control" id="exampleInputText-slb-form__control" />
                <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
            </div>
        </div>
        <div class="slb-form__group">
            <div class="slb-form__control-group">
                <div class="slb-form__control-group-prepend-block slb-form__control-group-prepend--xl">
                    <span>Search</span>
                </div>
                <input type="text" class="slb-form__control-block" id="exampleInputText-slb-form__control" />
                <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend><strong>Default append</strong> - Percentage Input group example</legend>
        <div class="slb-form__group">
            <div class="slb-form__control-group">
                <input type="text" class="slb-form__control" id="exampleInputText-slb-form__control"/>
                <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
                <div class="slb-form__control-group-append">
                    <span>%</span>
                </div>
            </div>
        </div>
        <div class="slb-form__group">
            <div class="slb-form__control-group">
                <input type="text" class="slb-form__control-block" id="exampleInputText-slb-form__control" />
                <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
                <div class="slb-form__control-group-append-block">
                    <span>%</span>
                </div>
            </div>
        </div>
    </fieldset>
</form>

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