Required files

Form layout

Note: some variables are in the settings file settings.forms.scss and can be reassigned after the include of the file if required

Use the class .form on the element that contains all the form elements

Inputs

Use the class .form__control directly on a textual input

Note: the code example below uses other wrappers and classes from the above general guidelines which helps with layout and validation etc.

<div class="form__group">
    <label class="form__label">Input field</label>
    <input class="form__control form__field" type="text" placeholder="Sample placeholder text">
</div>

Text areas

Use the class .form__control directly on a textarea

Note: the code example below uses other wrappers and classes from the above general guidelines which helps with layout and validation etc.

<div class="form__group">
    <label class="form__label">Text area</label>
    <textarea class="form__control form__field" type="text"></textarea>
</div>

Selects

Select elements are styled via a wrapping <div> which requires the class .select

Use the class .form__control directly on a select

The chevron icon is a background image applied to the .select:after element. See here for info on how to deal with background images in the UI Toolkit.

Note: the code example below uses other wrappers and classes from the above general guidelines which helps with layout and validation etc.

<div class="form__group">
    <label class="form__label">Select dropdown</label>
    <div class="select form__field">
        <select class="form__control">
            <option value="00">00</option>
            <option selected value="01">01</option>
            <option value="02">02</option>
        </select>
    </div>
</div>

Fields required

Add the modifying class to the form label .form__label--required

Alternative form controls

To apply the alternative form control styling use the modifying class .form__control--alt to any textual inputs, textareas or selects

Annoyingly the select wrapper .select also needs a class .select--alt to move the chevron flush to the right

Note: global helper classes are available to modify the styling and make a newsletter signup for example

Checkboxes

Checkbox elements are styled via a wrapping <label> which requires the class .checkbox.

Inside the label element should be the checkbox <input> followed by a <span> with the text required.

<label class="checkbox form__field" for="checkboxExample1">
    <input type="checkbox" name="checkboxExample1" id="checkboxExample1" checked="checked" value="value1">
    <span>This is an example of a checkbox</span>
</label>

Radios

Radio elements are styled via a wrapping <label> which requires the class .radio.

Inside the label element should be the radio <input> followed by a <span> with the text required.

Radios that are functionally grouped together via the name attribute can have a wrapping div with the class .form__group for styling as a group.

Radios can also be made inline by applying the modifying class .radio--inline

<div class="form__group">
    <label class="radio form__field" for="radioExample1">
        <input type="radio" id="radioExample1" name="radioExample" value="radioExample1">
        <span>Radio example one</span>
    </label>
    <label class="radio form__field" for="radioExample2">
        <input type="radio" id="radioExample2" name="radioExample" value="radioExample2">
        <span>Radio example two</span>
    </label>
    <label class="radio form__field" for="radioExample3">
        <input type="radio" id="radioExampleDisabled" name="radioExample" value="radioExampleDisabled" disabled>
        <span>Radio example disabled</span>
    </label>
</div>