ASP Digital Design System

Text input

Open this example in a new tab: text-input

<div class="form__group" id="text-input-example-1">  
  <label class="form__label" for="text-input-example-1-text-input">First name</label>  
  <input class="form__input" id="text-input-example-1-text-input" type="text">  
</div>

Text input with hint

Open this example in a new tab: text-input

<div class="form__group" id="text-input-example-2">  
  <label class="form__label" for="text-input-example-2-text-input">First name</label>  
  <p class="form__hint">Other persons previously accused of this offence but who are not the co-accused</p>  
  <input class="form__input" id="text-input-example-2-text-input" type="text">  
</div>

Text input with submission error

Open this example in a new tab: text-input

<div class="form__group form__group--error" id="text-input-example-3">  
  <label class="form__label" for="text-input-example-3-text-input">First name</label>  
  <p class="form__error-message">"First name" is required</p>  
  <input class="form__input form__input--error" id="text-input-example-3-text-input" type="text">  
</div>

Text input with hint and submission error

Open this example in a new tab: text-input

<div class="form__group form__group--error" id="text-input-example-4">  
  <label class="form__label" for="text-input-example-4-text-input">First name</label>  
  <p class="form__hint form__hint--error">Other persons previously accused of this offence but who are not the co-accused</p>  
  <p class="form__error-message">"First name" is required</p>  
  <input class="form__input form__input--error" id="text-input-example-4-text-input" type="text">  
</div>

Text input for search

Open this example in a new tab: text-input

<div class="form__group" id="search-example-1">  
  <label class="form__label" for="search-example-1-text-input">Search records</label>  
  <p class="form__hint">Search by occurrence number, VIM reference number, suspect name or witness name</p>  
  <div class="form__group--inner form__group--inner-with-button">  
    <input class="form__input" id="search-example-1-text-input" type="text">  
    <button class="button button--start button--append" type="submit">Search</button>  
  </div>  
</div>

Text input for collar number

Open this example in a new tab: text-input

<div class="form__group" id="collar-number-example-1">  
  <label class="form__label" for="collar-number-example-1-number">Requested by (collar number)</label>  
  <label class="sr-only" for="collar-number-example-1-name">Officer name</label>  
  <div class="form__group--inner">  
    <div class="form__collar">  
      <input class="form__input" id="collar-number-example-1-number" type="text">  
    </div>  
    <input class="form__input form__input--lightgrey" id="collar-number-example-1-name" type="text" readonly>  
  </div>  
</div>

Text input with maximum characters

Open this example in a new tab: text-input

<div class="form__group" id="text-input-example-max">  
  <label class="form__label" for="text-input-example-max-text-input">First name</label>  
  <input class="form__input" id="text-input-example-max-text-input" type="text" maxlength="30" data-countdown>  
  <p id="text-input-example-max-text-input-countdown">You can enter up to 30 characters</p>  
</div>

When JavaScript is enabled, the message should be “You have XX characters remaining”. This will tailor to interactions / prepopulated content on page load. Default (JavaScript disabled) message “You can enter up to XX characters”.

Text input within complex fieldsets

Open this example in a new tab: text-input

<fieldset class="form__fieldset form__group" id="complex-example-1">  
  <legend class="sr-only">Address</legend>  
  <div class="form__group">  
    <label class="form__label" for="complex-example-1-postcode">Postcode search</label>  
    <div class="form__group--inner form__group--inner-with-button">  
      <input class="form__input" id="complex-example-1-postcode">  
      <button class="button button--start button--append" type="button">Find address</button>  
    </div>  
  </div>  


  <div class="form__group" id="complex-example-1-postcodegroup" hidden>
    <label class="form__label" for="complex-example-1-suspect-address-selection">Select an address</label>
    <select class="form__input" id="complex-example-1-suspect-address-selection">
    </select>
  </div>  


  <div class="form__group">
    <p class="form__label" aria-hidden="true">Building and street (optional)</p>
    <label class="sr-only" for="complex-example-1-suspect-address-1">Building (optional)</label>
    <input class="form__input" id="complex-example-1-suspect-address-1">
    <div class="form__group--100">
      <label class="sr-only" for="complex-example-1-suspect-address-2">Street (optional)</label>
      <input class="form__input" id="complex-example-1-suspect-address-2">
    </div>
  </div>  


  <div class="form__group">
    <label class="form__label" for="complex-example-1-suspect-town">Town or city (optional)</label>
    <input class="form__input" id="complex-example-1-suspect-town">
  </div>  


  <div class="form__group">
    <label class="form__label" for="complex-example-1-suspect-county">County (optional)</label>
    <input class="form__input" id="complex-example-1-suspect-county">
  </div>  


  <div class="form__group">
    <label class="form__label" for="complex-example-1-suspect-country">Country</label>
    <p class="form__error-message"></p>
    <select class="form__input" id="complex-example-1-suspect-country">
      <option>Select Country</option>
      <option value="england" id="england">England</option>
    </select>
  </div>  


  <div class="form__group">
    <label class="form__label" for="complex-example-1-suspect-postcode">Postcode (optional)</label>
    <p class="form__error-message"></p>
    <input class="form__input" id="complex-example-1-suspect-postcode">
  </div>
</fieldset>

When to use this component

Use the text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number.

This component can be added within a conditional question.

When not to use this component

Do not use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the textarea component.

You should align labels above the text input they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.

Placeholder text

Do not use placeholder text in place of a label, or for hints or examples, as:

  • it vanishes when the user starts typing, which can cause problems for users with memory conditions or when reviewing answers
  • not all screen readers read it out
  • its browser default styles often do not meet minimum contrast requirements

Autocomplete attribute

Use of the autocomplete attribute should be considered very carefully. Due to the nature of the information being collected, the default for autocomplete is to set it to off, reducing the risk of exposing sensitive information.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version In Progress
Figma version Not started
M365 versions Not started
Documentation In progress

Published 3 May 2024
Last updated 6 August 2024