Style Guide Menu

Forms


Buttons Back to top

Standard buttons

<button>Standard</button>
<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-tertiary">Tertiary</button>
<button class="btn-primary btn-loading">Loading</button>
<button class="btn-primary btn-proceed">Proceed</button>
<button class="btn-primary btn-back">Back</button>

Note: margin was added below the buttons in the example; it is not shown in markup above for simplicity.

Disabled buttons

Buttons can be marked as disabled using the disabled attribute (recommended) or by adding a class of disabled to the button element.

<button disabled>Disabled standard</button>
<button class="btn-primary" disabled>Disabled primary</button>
<button class="btn-secondary" disabled>Disabled secondary</button>
<button class="btn-tertiary" disabled>Disabled tertiary</button>

Note: margin was added below the buttons in the example; it is not shown in markup above for simplicity.

Buttons modifiers



<button class="btn-small">Small</button>
<button class="btn-medium">Medium</button>
<button class="btn-large">Large</button>

<hr>

<button class="btn-small btn-pill">Pill button</button>
<button class="btn-primary btn-small btn-pill">Pill button primary</button>
<button class="btn-secondary btn-small btn-pill">Pill button secondary</button>

<hr>

<button class="btn-primary btn-full">Block button</button>

Text fields Back to top

All form controls should be accompanied with a label element associated to the field using the for attribute. Each form row should also be wrapped in a div.form-row container, as per the examples below.

textarea elements should have their rows attribute set to the desired height.

<div class="form-row">
    <label for="input-1">Text input</label>
    <input id="input-1" type="text">
</div>

<div class="form-row">
    <label for="input">Inline text input</label>
    <input class="input-inline" id="input" type="text" size="10">
</div>

<div class="form-row">
    <label for="textarea-1">Textarea</label>
    <textarea id="textarea-1" cols="30" rows="4"></textarea>
</div>

Input fields prefixes and suffixes

£
km
£ .00
<div class="form-row">
    <label for="input-prefix">Input prefix</label>
    <span class="prefix">£</span>
    <input id="input-prefix" class="input-prefix" type="text">
</div>
<div class="form-row">
    <label for="input-prefix">Input suffix</label>
    <input id="input-suffix" class="input-suffix" type="text">
    <span class="suffix">km</span>
</div>
<div class="form-row">
    <label for="input-prefix-suffix">Input with both prefix and suffix</label>
    <span class="prefix">£</span>
    <input id="input-prefix-suffix" class="input-prefix input-suffix" type="text">
    <span class="suffix">.00</span>
</div>

<div class="form-row">
<label for="select">Select dropdown</label>
<select id="select">
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option>
</select>
</div>

<div class="form-row">
    <label for="select">Inline select dropdown</label>
    <select class="input-inline" id="select">
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
    </select>
</div>

Checkboxes and radio buttons Back to top

Checkboxes

If checkboxes are grouped, the set must be wrapped in a fieldset element. The legend element then carries the title for the grouped checkboxes.

Select all that apply
<fieldset>
    <legend>Select all that apply</legend>
    <div class="form-row">
        <input id="box1" type="checkbox">
        <label for="box1">Checkbox 1</label>
    </div>
    <div class="form-row">
        <input id="box2" type="checkbox">
        <label for="box2">Checkbox 2</label>
    </div>
    <div class="form-row">
        <input id="box3" type="checkbox">
        <label for="box3">Checkbox 3</label>
    </div>
</fieldset>

Radio buttons

Sets of radio buttons must be wrapped in a fieldset for accessibility purposes. The legend element must carry the label for the set of buttons.

Gender
<fieldset>
    <legend>Gender</legend>
    <div class="form-row">
        <input type="radio" id="gender_male" value="m" name="gender">
        <label for="gender_male" class="radio-label">Male</label>
    </div>
    <div class="form-row">
        <input type="radio" id="gender_female" value="f" name="gender">
        <label for="gender_female" class="radio-label">Female</label>
    </div>
</fieldset>

Tap tiles Back to top

Tap tiles are essentially radio buttons styled to be much easier to use on mobile and touch devices.

Answer the question. Yes or No.
<fieldset class="form-row">
    <legend>Answer the question. Yes or No.</legend>

    <input type="radio" id="radio-one" name="radio-group-1" class="tap-input">
    <label for="radio-one">Yes</label>

    <input type="radio" id="radio-two" name="radio-group-1" class="tap-input">
    <label for="radio-two">No</label>
</fieldset>

Large inputs Back to top

Large inputs can be created by simply increasing the font-size on the container element.

<div style="font-size: 1.5em;">
    <div class="form-row">
        <label for="large-1">Input</label>
        <input id="large-1" type="text">
    </div>
    <div class="form-row">
        <label for="large-2">Select</label>
        <select id="large-2">
            <option value="">Option 1</option>
            <option value="">Option 2</option>
        </select>
    </div>
</div>

Validation Back to top

Please enter something

<div class="form-row">
    <label for="input_error">Enter something</label>
    <input type="text" id="input_error" class="invalid">
    <p class="form-error">Please enter something</p>
</div>