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 with a prepend

Open this example in a new tab: text-input

<div class="form__group form__input--short" id="text-input-example-prepend">  
  <label class="form__label" for="text-input-example">Total value</label>  
  <div class="input__group">  
    <div class="input__prepend">£</div>  
    <input class="form__input" id="text-input-example" type="text">  
  </div>  
</div>

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.

For example, to enable autofill on a postcode field, set the autocomplete attribute to first-name. See how to do this in the HTML and Nunjucks tabs in the following example.

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" autocomplete="first-name">  
</div>

Avoid restricting the length of a user’s input

Using the maxlength attribute means there is no feedback to users that their text input is truncated. This is especially true where the text has been copied and pasted from elsewhere. This can cause users to accidentally provide incorrect or incomplete information.

A restrictive maximum length can stop users from formatting information in their usual way. For example, putting spaces in a postcode or commas in a large number.

Some assistive technologies do not tell users if an input has a maxlength set or if the user has passed the limit. Voice control software may insert additional spaces into the input.

If you must enforce a maximum length for technical reasons, inform the user of the limit in the hint, but allow them to provide more information.

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”.

Use appropriately-sized text inputs

Help users understand what they should enter by making text inputs the right size for the content they’re intended for.

By default, the width of text inputs is fluid and will fit the full width of the container they are placed into.

If you want to make the input smaller, you can either use a fixed width input, or use the width override classes to create a smaller, fluid width input.

Open this example in a new tab: text-input

<div class="form__group form__input--long" 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>  


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


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

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 16 December 2024