Text input
When to use this component
Use the text input component when you need users to enter text that is no longer than a single line, such as their name or phone number.
When to not use this component
Do not use the text input component if you need users to enter longer answers that might span multiple lines. In this case, use the textarea component.
There is specific guidance on how to ask for:
How it works
All text inputs must have visible labels aligned above the text input they refer to. Labels should be short, direct and written in sentence case. Do not use colons at the end of labels.
Avoid using placeholder text instead of labels or for hints/examples. Placeholder text can disappear as soon as users start typing, potentially causing issues for users with memory conditions or when reviewing answers. Additionally, not all screen readers read placeholder text, and its default browser styles may not meet minimum contrast requirements.
HTML examples
Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated below. Refer to the layouts section for further guidance on structuring your web template.
If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name.
Retain any prefixed or suffixed text related to the schema name.
For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).
This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.
For single question pages
If presenting only one question on the page, designate the contents of the label as the page heading. This practice ensures users of screen readers hear the contents only once.
You will need to include an empty {% title %} block in your web template to remove the default page header and avoid duplication.
For single question pages
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
What is your name?
</label>
</h1>
<input class="govuk-input" id="schema-name" name="schema-name" type="text" spellcheck="false">
</div>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
What is your name?
</label>
</h1>
<input class="govuk-input" id="schema-name" name="schema-name" type="text" spellcheck="false">
</div>
{% endblock %}For multiple question pages
If presenting more than one question on the page, do not set the contents of the label as the page heading.
For multiple question pages
<div class="govuk-form-group">
<label class="govuk-label" for="schema-name">
What is your name?
</label>
<input class="govuk-input" id="schema-name" name="schema-name" type="text" spellcheck="false">
</div>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<div class="govuk-form-group">
<label class="govuk-label" for="schema-name">
What is your name?
</label>
<input class="govuk-input" id="schema-name" name="schema-name" type="text" spellcheck="false">
</div>
{% endblock %}Using hint text
Use hint text to provide relevant assistance to the majority of users, such as clarifying how their information will be used or where to locate it.
Please ensure the following:
- Use the hint text block appropriately
- Place the hint block correctly within your HTML component
- Add the
aria-describedbyattribute where necessary, for accessibility
Avoid lengthy paragraphs and lists in hint text, as screen readers will read out the entire content, potentially frustrating users.
Using hint text
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
What is your National Insurance number?
</label>
</h1>
<div id="schema-name-hint" class="govuk-hint">
It's on your National Insurance card, benefit letter, payslip or P60. For example, 'QQ 12 34 56 C'.
</div>
<input class="govuk-input govuk-input--width-10" id="schema-name" name="schema-name" type="text" spellcheck="false" aria-describedby="schema-name-hint">
</div>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
What is your National Insurance number?
</label>
</h1>
<div id="schema-name-hint" class="govuk-hint">
It's on your National Insurance card, benefit letter, payslip or P60. For example, 'QQ 12 34 56 C'.
</div>
<input class="govuk-input govuk-input--width-10" id="schema-name" name="schema-name" type="text" spellcheck="false" aria-describedby="schema-name-hint">
</div>
{% endblock %}Error messages
An error message is displayed next to the field and in the error summary when a validation error occurs. The CRM helper framework automatically handles error messages for specific error states, therefore you do not need to add any additional error containers to your HTML. Refer to the CRM helper framework guide to understand how to validate your front-end data.
Ensure that your component HTML and your inputs validation JavaScript object are structured correctly for your component type.
If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.