Text Input
Text inputs are used when you need to let users enter text that’s no longer than a single line, such as their name or phone number.
Intended behaviour
All text inputs must have labels, and in most cases the label should be visible.
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.
Avoid 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
If you’re asking one question on the page
If you’re asking just one question per page as recommended, you can set the contents of
the <label> as the page heading. This is good practice as it means that
users of screen readers will only hear the contents once. 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.
Fixed width inputs
Use fixed width inputs for content that has a specific, known length. Postcode inputs should be postcode-sized, telephone number inputs should be telephone number-sized.
The widths are designed for specific character lengths and to be consistent across a range of browsers. They include extra padding to fit icons that some browsers might insert into the input (for example to show or generate a password).
On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
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.
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.
Variations
Minimal input
open this example in its own window
<label for="ds-id-0" class="form-label"> Lorem ipsum </label>
<input type="text" class="form-control" id="ds-id-0" />
Options to the textInput() macro
{% from 'macros/component/text-input.html' import textInput %}
{{ textInput({
'label': 'Lorem ipsum'
}) }}
Required input
open this example in its own window
<label for="ds-id-1" class="form-label"> Lorem ipsum </label>
<input type="text" class="form-control" id="ds-id-1" required />
Options to the textInput() macro
{% from 'macros/component/text-input.html' import textInput %}
{{ textInput({
'label': 'Lorem ipsum',
'required': true
}) }}
Invalid input
open this example in its own window
<label for="ds-id-2" class="form-label"> Lorem ipsum </label>
<input type="text" class="form-control is-invalid" id="ds-id-2" />
Options to the textInput() macro
{% from 'macros/component/text-input.html' import textInput %}
{{ textInput({
'label': 'Lorem ipsum',
'invalid': true
}) }}
Disabled input
open this example in its own window
<label for="ds-id-3" class="form-label"> Lorem ipsum </label>
<input type="text" class="form-control" id="ds-id-3" disabled />
Options to the textInput() macro
{% from 'macros/component/text-input.html' import textInput %}
{{ textInput({
'label': 'Lorem ipsum',
'disabled': true
}) }}
Prepopulated input
open this example in its own window
<label for="ds-id-4" class="form-label"> Lorem ipsum </label>
<input type="text" class="form-control" value="Lorem ipsum" id="ds-id-4" />
Options to the textInput() macro
{% from 'macros/component/text-input.html' import textInput %}
{{ textInput({
'label': 'Lorem ipsum',
'value': 'Lorem ipsum'
}) }}