Text input
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.
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 instead.
There is specific guidance on how to ask for:
How it works
Read the GOV.UK Design System guidance on text inputs (opens in a new tab) for information on labels, hint text, and accessibility considerations.
HTML examples
Copy the HTML into your web template. Replace schema-name with your CRM field schema name, keeping any suffixes like -hint. This is required for the CRM helper framework to validate and submit data.
Use the input field above each example to enter your schema name. This updates all instances in the code automatically, ensuring no mistakes that could impact validation or accessibility.
For single question pages
If presenting only one question on the page, 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.
You will need to include an empty {% title %} block in your web template to remove the default page header.
Text input for single question
<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.
Text input for multiple questions
<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 for help that's relevant to the majority of users, like how their information will be used, or where to find it.
Do not use long paragraphs and lists in hint text. Screen readers read out the entire text when users interact with the form element. Do not include links within hint text.
Text input with hint
<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 %}Use appropriately-sized 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.
Read more about sizing your inputs and see examples on the GOV.UK Design System (opens in a new tab).
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.
If nothing is entered and the question is required
'Enter [whatever it is]'. For example, 'Enter your full name'.
If the input is too long
'[whatever it is] must be [number] characters or less'. For example, 'Full name must be 50 characters or less'.
If the input is too short
'[whatever it is] must be [number] characters or more'. For example, 'Full name must be 2 characters or more'.
If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.