ASP Digital Design System

Forms

Open this example in a new tab: forms

<div class="form__page-heading">  
  <h1 class="form__page-title">Form Title</h1>  
  <p class="form__page-subtitle">All fields are required unless specified otherwise.</p>  
</div>  
<fieldset class="form__fieldset form__group">  
    …form content…  
</fieldset>

Form with errors

Place at the top of the page. WIP — above div.form__page-heading

Links should go to the question id, placed on fieldset.form__fieldset if question is wrapped in a fieldset or div.form__group.form__group--error if question is not wrapped in a fieldset

Give an example of a link to the field with an error?

Open this example in a new tab: forms

<div class="form__errors" id="errors-example-1" role="group">    
  <h2 class="form__errors-heading">Please fix the following issue before continuing</h2>    
  <ul class="form__errors-list">    
    <li><a href="#" class="form__errors-list-item">Full name is required</a></li>  
  </ul>    
</div>

Error links should be alphanumeric lowercase characters with spaces replaced with hyphens.
If the question with error has one single input, the link must go to the corresponding input’s id (anchor link). A screenreader will read out the corresponding label.
If the question with error has multiple inputs with one single error message, (for example, a single error message about date, with three inputs; day, month and year inputs), an id (anchor link) is used on the nearest surrounding .form__group from the input. A screenreader will read out the nearest legend or label relating to the question.

Form with multiple errors

Give an example of a link to the fields with errors?

Open this example in a new tab: forms

<div class="form__errors" id="errors-example-2" role="group">    
  <h2 class="form__errors-heading">Please fix the following issues before continuing</h2>    
  <ul class="form__errors-list">    
    <li><a href="#" class="form__errors-list-item">Your response to Full name is not valid</a></li>    
    <li><a href="#" class="form__errors-list-item">A selection is required</a></li>    
    <li><a href="#" class="form__errors-list-item">Occurrence type is required</a></li>    
  </ul>    
</div>

WIP -- We use HTML5 attributes (e.g. required) on child elements within conditional content. BUT do not use it on parent elements

JavaScript countdown

Published 3 May 2024
Last updated 18 December 2024