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.
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.
Do not use placeholder text in place of a label, or for hints or examples, as:
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.
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.
{{ aspExample({ code: "<div class=\"form__group\" id=\"text-input-example-max\">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”.
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.
{{ aspExample({ code: "<div class=\"form__group form__input–long\" id=\"text-input-example-1\">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.