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>

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 6 August 2024