Forms

Forms and their components are explained, with guidelines and examples.

Input fields

Buttons

Example form

Input fields

Text field

Text fields have various states to give the user a clear understanding of their progress while filling in the form.

Standard

This is the default - a plain text field with no icons or judgement text.

Example

Text input

Code example

<label class="c-form__label" id="example-text-input-label" for="example-text-input">Text input</label>    
<input class="c-form__input" name="example-text-input" type="text" aria-labelledby="example-text-input-label">

Disabled

This shows the text field as unavailable, ie if not relevant at that point in the form process.

Example

Inactive text input

Code example

<label class="c-form__label" id="example-inactive-input" for="example-inactive-input">Inactive text input</label>
<input class="c-form__input is-inactive" name="example-inactive-input" type="text" disabled aria-disabled="true" aria-labelledby="example-inactive-input-label">

Active feedback

A correct password results in a ‘tick’ being displayed.

Example

Code example

<input class="c-icon c-icon--right c-icon--large c-icon__tick--green c-form__state--success-border" name="password" type="password" aria-labelledby="password-help-text-example-label" value="password" aria-required="true">

Error

Example

An error message appears below any field with wrongly entered information.

Please provide a valid email address

Code example

<input class="c-icon c-icon--right c-icon--large c-icon__exclamation--red c-form__state--error-border" type="email" name="example-field-email" value="invalid@email" aria-invalid="true" aria-describedBy="example-form-email-error">
    <span id="example-form-email-error" class="c-form__state--error-noborder">Please provide a valid email address</span>

Help

A help input text field includes a question icon to launch tooltip information.

Example

Code example

<input class="c-form__input c-icon c-icon__question--blue c-icon--right" name="example-help-input"  value="" rel="tooltip" title="tooltip for additional help information"  aria-labelledby="example-help-input-label">

Text area

Example

Text input area

Code example

<label class="c-form__label" id="example-textarea-label" for="example-textarea">Text input area</label>
<textarea class="c-form__textarea" name="example-textarea" aria-labelledby="example-textarea-label" /></textarea>

Disabled

This shows the textarea as unavailable, ie if not relevant at that point in the form process.

Example

Inactive text input area

Code example

<class="c-form__label" id="example-textarea-disabled-label" for="example-textarea>Text input area</label>
<textarea class="c-form__textarea is-inactive" name="example-textarea" aria-labelledby="example-textarea-disabled-label" aria-disabled="true" /></textarea>

Drop down

This allows multiple options in an expandable field.

Example

Code example

<select class="c-form__select" name="example-select" aria-labelledby="example-select-label">
    <option value="opt1">option 1</option>
    <option value="opt2">option 2</option>
    <option value="opt3">option 3</option>
    <option value="opt4">option 4</option>
</select>

Disabled

This shows the select dropdown as unavailable, ie if not relevant at that point in the form process.

Example

Code example

<select class="c-form__select is-inactive" name="example-select-inactive" aria-labelledby="example-select-label" aria-disabled="true">
    <option value="opt1">option 1</option>
    <option value="opt2">option 2</option>
    <option value="opt3">option 3</option>
    <option value="opt4">option 4</option>
</select>

Error state

This shows the select dropdown if not selected if required for example

Example

Code example

<select class="c-form__select c-form__state c-form__state--error-border" name="example-select-error" aria-labelledby="example-select-label" aria-disabled="false">
    <option value="opt1">option 1</option>
    <option value="opt2">option 2</option>
    <option value="opt3">option 3</option>
    <option value="opt4">option 4</option>
</select>

Radio buttons

Radio buttons allow a user to select one choice from a set of options.

Example

Radio button 1 Radio button 2

Code example

<input name="example-radio" id="example-radio-1" type="radio" class="c-form__input c-form__input__radio" value="1" aria-labelledby="example-radio-1-label">

<label id="example-radio-1-label" class="c-form__label-radio" for="example-radio-1">
    <span class="c-form__label-radio-grey-outline c-form__label-radio-grey-outline-circle">
        <span class="c-form__label-radio-grey-outline-circle-inner-circle"></span>
    </span>
Radio button 1</label>

<input name="example-radio" id="example-radio-2" type="radio" class="c-form__input c-form__input__radio" value="2" aria-labelledby="example-radio-2-label">

<label id="example-radio-2-label" class="c-form__label-radio" for="example-radio-2">
    <span class="c-form__label-radio-grey-outline c-form__label-radio-grey-outline-circle">
        <span class="c-form__label-radio-grey-outline-circle-inner-circle"></span>
    </span>
Radio button 2</label>

Example of error message for radio button

Radio button 1 Radio button 2

Please select option

Code example

<div class="js-radio c-form__state c-icon c-icon--right c-icon--large c-icon__exclamation--red u-pl1 color-grey-black c-form__state--error-border--left">
    <input name="example-radio" id="example-radio-1" type="radio" class="c-form__input c-form__input__radio" value="1" aria-labelledby="example-radio-1-label">
    <label id="example-radio-1-label" class="c-form__label-radio" for="example-radio-1">
        <span class="c-form__label-radio-grey-outline c-form__label-radio-grey-outline-circle">
            <span class="c-form__label-radio-grey-outline-circle-inner-circle"></span>
        </span>
    Radio button 1</label>
    <input name="example-radio" id="example-radio-2" type="radio" class="c-form__input c-form__input__radio" value="2" aria-labelledby="example-radio-2-label">
    <label id="example-radio-2-label" class="c-form__label-radio" for="example-radio-2">
        <span class="c-form__label-radio-grey-outline c-form__label-radio-grey-outline-circle">
            <span class="c-form__label-radio-grey-outline-circle-inner-circle"></span>
        </span>
        Radio button 2
    </label>
</div>

Check boxes

Check boxes allow a user to select one or more choices from a set of options.

Example

Check Box 1

Code example

<input type="checkbox" id="example-checkbox" name="example-checkbox" checked="checked" class="c-form__input c-form__input__checkbox">
        <label class="c-form__label-checkbox" for="example-checkbox"><span class="c-form__label-checkbox-grey-outline"><span></span></span>Check Box 1</label>

Example of error state for checkbox list

Check Box 1
Check Box 2

Please select at least one option

Code example

<div class="js-checkbox c-form__state c-icon c-icon--right c-icon--large c-icon__exclamation--red u-pl1 color-grey-black c-form__state--error-border--left">
    <ul class="o-list-bare">
        <li><input type="checkbox" id="example-checkbox2" name="example-checkbox" checked=& class="c-form__input c-form__input__checkbox">
            <label class="c-form__label-checkbox" for="example-checkbox">
                <span class="c-form__label-checkbox-grey-outline"></span>
            Check Box 1
        </label>
        <\li>
        <li>
            <input type="checkbox" id="example-checkbox3" name="example-checkbox" class="c-form__input c-form__input__checkbox">
            <label class="c-form__label-checkbox" for="example-checkbox">
                <span class="c-form__label-checkbox-grey-outline"></span>
            Check Box 2</label>
        <\li>
    <\ul> 
</div>
<p class="c-form__state c-form__state--error-noborder js-error-msg">Please select at least one option</p>

Input range

This allows a user to specify a value between a lower and upper limit.

Example

Code example

<input class="c-form__input__range" type="range" min="0" max="100" value="0" step="1" onchange="settextContent(value, exampleoutput)">
    <span id="exampleoutput">0<span>

Buttons

Submit button

This is a standard button to submit information.

Example

Code example

<input class="c-btn c-btn--primary c-form__input__submit c-icon c-icon--right c-icon__arrow-right--white" type="submit" value="Submit Button">

Reset button

This resets the form information before submission.

Example

Code example

<input class="c-btn c-btn--secondary c-form__input__submit c-icon c-icon--right c-icon__reset--white" type="reset" value="Reset Button">

Cancel button

This is a standard cancel button. It might appear next to a standard submit button.

Example

Code example

<input class="c-btn c-btn--alert c-form__input__submit" type="submit" value="Cancel Button">

Disabled button

The disabled button is inactive to prevent user interaction until some other condition has been met.

Example

Code example

<input class="c-btn c-btn--disabled c-form__input__submit" type="submit" value="Disabled Button" disabled aria-disabled="true">

Submit button with errors

A further error message appears next to the submit button to reiterate any inaccurately entered information higher up in the form.

Example

Please provide a valid email address

Code example

<input class="c-icon c-icon--right c-icon--large c-icon__exclamation--red c-form__state--error-border" type="email" name="example-field-email" value="invalid@email" aria-invalid="true" aria-describedBy="example-form-email-error">

<input class="c-btn c-btn--primary c-form__input__submit c-icon c-icon--right c-icon__right-arrow--white" type="submit" value="Submit Button">

<span id="example-form-email-error" class="c-form__state c-form__state--error-noborder" aria-invalid="true">Please provide a valid email address</span>

Required fields

A red asterisk symbol indicates that the input field is a required field.

Example

Email address* *This is a required field

Code example

<label class="c-form__label" for="example-field-email" id="email-label">Email address<span id="example-form-required" class="c-form__state--required">*</span></label>
<input class="c-icon c-icon--right c-icon--large" type="email" name="example-field-email" value="" aria-required="true" aria-describedBy="example-form-email-error">
<span id="example-form-email-error" class="c-form__state c-form__state--error-noborder">Please provide a valid email address</span> 
<span class="c-form__state u-mt1"><span id="example-form-required" class="c-form__state--required">*</span>This is a required field</span>

Example form

1. Who you are First name Last name Mobile number Email address Confirm email address

2. What you do Do you currently teach an AQA qualification?

Yes No

Tell us a little about yourself

3. Updates

Tick the boxes to indicate which updates you would like to receive.

English Maths Science Biology Chemistry

We will use the above information to send you updates on your subjects of interest as well as appropriate support services and initiatives.

Please tick this box if you do not wish to receive this information