We use necessary cookies to make our website work. We'd also like to use optional cookies to understand how you use it, and to help us improve it.

For more information, please read our cookie policy.

Form elements

We would like to hear from you

The CAA is committed to improving how we deliver services, please help us by completing a short survey about your experiences today

Checkbox

Example

Markup

                        
<div class="c-form__group">
    <label class="c-form__checkbox-label c-form__label">
        <input class="c-form__checkbox-input" type="checkbox">
        <span class="c-form__checkbox-text">View De-Registered Aircraft</span>
    </label>
</div>
Back to top

Confirmation

Example

Markup

                        
<div class="c-confirmation c-rich-text" role="alert">
    <h2>Comment submitted</h2>
    <p>
        Thank you for commenting on this blog post. Your comment will now be moderated by the CAA, and then published.
    </p>
</div>

Guidance

  • Apply the alert role to the containing element to ensure that the confirmation is communicated as important information to screen reader users.
  • Move focus to the confirmation component when it's displayed i.e. on completion of a process.
Back to top

Dropdown list

Example

Markup

                        
<div class="c-form__group">
    <label class="c-form__label" for="reportView">Report View</label>
    <select id="reportView" class="c-form__field " name="reportview">
        <option label="Display on Screen" value="Display on Screen" selected="selected">Display on Screen</option>
        <option label="Extract to File" value="Extract to File">Extract to File</option>
    </select>
</div>
Back to top

Help text

Example

Search for Non-UK Regulated Agents

Markup

                        
<section class="m-module" aria-labelledby="sectionTitle">

        <h2 id="sectionTitle" class="m-module__title">Search for Non-UK Regulated Agents</h2>

        <div class="c-button-set">
            <a href="#" id="helpButton" class="c-button-set__link" role="button" aria-controls="helpText" aria-expanded="false">
                <span class="icon icon-question">

                </span>
                <span>
                    Help
                </span>
            </a>
        </div>

        <div id="helpText" class="c-rich-text c-help-text" role="complementary" aria-labelledby="helpButton">
            <h2 class="u-visuallyhidden">How to Search</h2>
            <p>A search can be made on one or more of the fields.</p>
            <h3>Multiple fields</h3>
<p>Searching across multiple fields will look for a match on all of the fields that have search criteria.  For example, if you enter a value in country AND Company Name, a result will only be returned if there is a result that matches BOTH criteria.  It is not a search for a Country or Company Name.</p>

            <h3>UAI number</h3>
<p>A search on the UAI number will look for an exact match and will only return a result if the UAI number entered is found.</p>

            <h3>Country</h3>
<p>Selecting a Country from the drop-down list will return all records that exist for the selected country.</p>
            <h3>Company name</h3>
<p>The Company name field allows for searches to be made from two characters i.e. if Br is the search criteria, this would return results for British and Bristol etc.</p>
            <h3>Validation</h3>
<p>If a field has any specific validation criteria which are not met, an error message will be displayed below that field.</p>
<p>If no results are found, a message to that effect will be returned.</p>

        </div>
    </section>

Guidance

  • Help text should be revealed on click of the "Help" call-to-action button positioned inline with the module title.
  • The help text should be marked up as complementary content, by applying the complementary role to its containing element.
  • The help text containing element should be labelled by the button that controls it.
Back to top

Multi step form buttons

Example

Back

Markup

                        
<div id="paginationButtons" class="m-multi-step-form__buttons-wrapper" style="display:block">
    <div class="m-multi-step-form__buttons">
        <a id="prevButton" href="#" role="button" class="c-pagination__link">
            <span class="icon icon-arrow_left"></span>
            <span>Back</span>
        </a>
        <button id="nextButton" class="c-button-action c-button-action--default" type="submit">Continue</button>
    </div>
</div>

Guidance

  • The button set should be right aligned, at the foot of each form step.
  • The text value of the "Continue" button should be set to "Start" at the beginning of the process, and "Submit" at the end.
Back to top

Radio buttons

Example

Search by:
Search by:

Markup

                        
<fieldset class="c-form__group">
    <legend class="c-form__label">Search by:</legend>
    <label class="c-form__radio-label c-form__label c-form__sub-label">
        <input id="Product" class="c-form__radio-input" type="radio" value="Product" name="SearchOption">
        <span class="c-form__radio-text">Product</span>
    </label>
    <label class="c-form__radio-label c-form__label c-form__sub-label">
        <input class="c-form__radio-input" type="radio" value="Approval No" name="SearchOption">
        <span class="c-form__radio-text">Approval No</span>
    </label>
    <label class="c-form__radio-label c-form__label c-form__sub-label">
        <input class="c-form__radio-input" type="radio" value="Category" name="SearchOption">
        <span class="c-form__radio-text">Category</span>
    </label>
</fieldset>
<hr/>
<fieldset class="c-form__group">
    <legend class="c-form__label">Search by:</legend>
    <label class="c-form__radio-label c-form__radio-label--inline c-form__label c-form__sub-label">
        <input id="Product" class="c-form__radio-input" type="radio" value="Product" name="SearchOption">
        <span class="c-form__radio-text">Product</span>
    </label>
    <label class="c-form__radio-label c-form__radio-label--inline c-form__label c-form__sub-label">
        <input class="c-form__radio-input" type="radio" value="Approval No" name="SearchOption">
        <span class="c-form__radio-text">Approval No</span>
    </label>
    <label class="c-form__radio-label c-form__radio-label--inline c-form__label c-form__sub-label">
        <input class="c-form__radio-input" type="radio" value="Category" name="SearchOption">
        <span class="c-form__radio-text">Category</span>
    </label>
</fieldset>

Guidance

  • Use a fieldset element to group the radio buttons and legend to label the group. This ensures that screen readers announce a given radio button as part of group when it receives focus.
  • Apply the c-form__radio-label--inline modifier class to each label element to render the radio buttons inline.
Back to top

Step indicator

Example

  1. Completed: Instructions
  2. Completed: Reporter's Details
  3. Current: Date and Time of Airprox
  4. 1st Aircraft Details
  5. 2nd Aircraft Details
  6. Airprox Details
  7. Summary

Markup

                        
<div id="stepIndicator" class="c-step-indicator-wrapper">
    <ol class="c-step-indicator" aria-label="Step indicator">
        <li class="c-step-indicator__item c-step-indicator__item--past c-step-indicator__item--past">
            <span class="c-step-indicator__item-status">Completed:</span>
            <span class="c-step-indicator__item-content">
                <span class="c-step-indicator__item-text">
                    Instructions
                </span>
            </span>
        </li>
        <li class="c-step-indicator__item c-step-indicator__item--past">
            <span class="c-step-indicator__item-status">Completed:</span>
            <span class="c-step-indicator__item-content">
                <span class="c-step-indicator__item-text">
                    Reporter's Details
                </span>
            </span>
        </li>
        <li class="c-step-indicator__item c-step-indicator__item--current">
            <span class="c-step-indicator__item-status">Current:</span>
            <span class="c-step-indicator__item-content">
                <span class="c-step-indicator__item-text">
                    Date and Time of Airprox
                </span>
            </span>
        </li>
        <li class="c-step-indicator__item">
            <span class="c-step-indicator__item-status"></span>
            <span class="c-step-indicator__item-content">
                <span class="c-step-indicator__item-text">
                    1st Aircraft Details
                </span>
            </span>
        </li>
        <li class="c-step-indicator__item">
            <span class="c-step-indicator__item-status"></span>
            <span class="c-step-indicator__item-content">
                <span class="c-step-indicator__item-text">
                    2nd Aircraft Details
                </span>
            </span>
        </li>
        <li class="c-step-indicator__item">
            <span class="c-step-indicator__item-status"></span>
            <span class="c-step-indicator__item-content">
                <span class="c-step-indicator__item-text">
                    Airprox Details
                </span>
            </span>
        </li>
        <li class="c-step-indicator__item">
            <span class="c-step-indicator__item-status"></span>
            <span class="c-step-indicator__item-content">
                <span class="c-step-indicator__item-text">
                    Summary
                </span>
            </span>
        </li>
    </ol>
</div>

Guidance

  • For use in multi-step forms.
  • Ensure that progress is communicated both visually and in text. This is achieved by replacing the step number with the checkmark icon and replacing the visually hidden text "Current:" with "Completed:".
Back to top

Submit button

Example

Markup

                        
<div class="m-search-form__advanced-buttons">
    <button type="submit" class="m-search-form__button c-button-action c-button-action--default">Search</button>
    <button type="button" class="m-search-form__button c-button-action c-button-action--invert">Reset</button>
</div>

Guidance

  • The submit button should always be positioned to the left and inline with the reset button when implemented as a set.
  • Only apply the c-button-action--invert modifier class to buttons that perform a cancel or reset action.
Back to top

Text area

Example

The Comment field is required.

Markup

                        
<div class="m-search-form">
    <form>
        <fieldset>
            <div class="c-form__group">
                <label class="c-form__label c-form__label--required" for="Comment">Comment</label>
                <textarea aria-required="true" autocomplete="off" class="input-validation-error c-form__field" cols="20" id="Comment" name="Comment" rows="5" aria-describedby="CommentError" aria-invalid="true"></textarea>
                <span class="field-validation-error m-search-form__message" id="CommentError">The Comment field is required.</span>
            </div>
        </fieldset>
    </form>
</div>
Back to top

Text input

Example

The Name field is required.

Markup

                        
<div class="m-search-form">
    <form>
        <fieldset>
            <div class="c-form__group">
                <label class="c-form__label c-form__label--required" for="Name">Name</label>
                <input aria-required="true" autocomplete="name" class="input-validation-error c-form__field" id="Name" name="Name" type="text" value="" aria-describedby="NameError" aria-invalid="true">
                <span class="field-validation-error m-search-form__message" id="NameError">The Name field is required.</span>
            </div>
        </fieldset>
    </form>
</div>

Guidance

  • Apply the c-form__label--required modifier class to the label when the field is required, and the aria-required="true" attribute to the input element itself.
  • When a field is in an error state, ensure that the the aria-invalid="true" attribute is applied to it, and that the error message is associated with the field. This can be achieved by giving the error message an id attribute (e.g. id="NameError") and using the aria-describedby attribute on the input field to point to it (e.g. aria-describedby="NameError").
  • Always apply autocomplete attributes to common input fields. For example, email fields should have the autocomplete attribute value set to "email", name field autocomplete values set to "name" and so on and so forth. See MDN for a full list of autocomplete values for common input fields.
Back to top

Validation summary

Example

Markup

                        
<div class="c-form__validation-summary c-rich-text validation-summary-errors c-form__validation-summary--errors c-form__validation-summary--in-form" data-valmsg-summary="true" role="alert" aria-atomic="true" tabindex="-1">
    <span class="c-banner__icon icon icon-alert" aria-hidden="true"></span>
    <div class="c-form__validation-summary-content">
        <h2>There are problems with the information you entered. Please correct the following and resubmit:</h2>
        <ul><li><a href="#DateOfAirprox" class="validation-error-link">The Date Of Airprox field is required.</a></li><li><a href="#TimeOfAirprox" class="validation-error-link">The Time Of Airprox field is required.</a></li></ul>
    </div>
</div>

Guidance

  • Ensure the alert role is applied to the element to communicate its importance to screen reader users.
  • On validation failure, apply the tabindex attribute to the element, with a value of -1, and then move focus to it.
  • The aria-atomic attribute with value true ensures that screen readers announce the element's content as a whole, when only part of it changes.
  • Each list item should move focus to the corresponding element on click.
Back to top

News from UK Civil Aviation Authority

  1. UK to bring aviation experts together for third legal summit
    • Published on:
    • Category: News Item
  2. UK Civil Aviation Authority approves Manchester Low-Level Route airspace change
    • Published on:
    • Category: News Item
  3. Real term price reduction proposed for UK Civil Aviation Authority charges
    • Published on:
    • Category: News Item