{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "65a930778d349", url: "" }) }}

Text input with hint

{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "65a930778d3a8", url: "" }) }}

Text input with submission error

{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "65a930778d3eb", url: "" }) }}

Text input with hint and submission error

{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "667011759250f", url: "" }) }}

Text input for search

{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "663e287e72855", url: "" }) }}

Text input for collar number

{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "663e287e728b3", url: "" }) }}

Text input with maximum characters

{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "668cf215766f1", url: "" }) }}

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

{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "668e7b12a9ea3", url: "" }) }}

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:

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.


{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–yellow">In Progress</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}