Components Text input
<div class="govuk-form-group">
<label class="govuk-label" for="email">
Email address
</label>
<span id="email-hint" class="govuk-hint">
We’ll only use this to send you a receipt
</span>
<input class="govuk-input" id="email" name="email" type="text" aria-describedby="email-hint">
</div>{% from "input/macro.njk" import govukInput %}
{{ govukInput({
label: {
text: "Email address"
},
hint: {
text: "We’ll only use this to send you a receipt"
},
id: "email",
name: "email"
}) }}You can configure this component using the Nunjucks macro arguments.
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
Don’t 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.
How it works
There are 2 ways to use the text input component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
<div class="govuk-form-group">
<label class="govuk-label" for="email">
Email address
</label>
<span id="email-hint" class="govuk-hint">
We’ll only use this to send you a receipt
</span>
<input class="govuk-input" id="email" name="email" type="text" aria-describedby="email-hint">
</div>{% from "input/macro.njk" import govukInput %}
{{ govukInput({
label: {
text: "Email address"
},
hint: {
text: "We’ll only use this to send you a receipt"
},
id: "email",
name: "email"
}) }}You can configure this component using the Nunjucks macro arguments.
Label text inputs
All text inputs must have visible labels; placeholder text is not an acceptable replacement for a label as it vanishes when users click on the text input.
Labels should be aligned above the text input they refer to. They should be short, direct and written in sentence case. Don’t use colons at the end of labels.
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.
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.
<h3 class="govuk-heading-m">20 characters</h3>
<div class="govuk-form-group">
<label class="govuk-label" for="driving-licence-number">
Driving licence number
</label>
<input class="govuk-input govuk-input--width-20" id="driving-licence-number" name="driving-licence-number" type="text">
</div>
<h3 class="govuk-heading-m">10 characters</h3>
<div class="govuk-form-group">
<label class="govuk-label" for="post-code">
Post code
</label>
<input class="govuk-input govuk-input--width-10" id="post-code" name="post-code" type="text">
</div>{% from "input/macro.njk" import govukInput %}
<h3 class="govuk-heading-m">20 characters</h3>
{{ govukInput({
label: {
text: "Driving licence number"
},
classes: 'govuk-input--width-20',
id: "driving-licence-number",
name: "driving-licence-number"
}) }}
<h3 class="govuk-heading-m">10 characters</h3>
{{ govukInput({
label: {
text: "Post code"
},
classes: "govuk-input--width-10",
id: "post-code",
name: "post-code"
}) }}You can configure this component using the Nunjucks macro arguments.
Fluid width inputs
Use the width override classes to reduce the width of an input in relation to its parent container, for example, to two-thirds.
Fluid width inputs will resize with the viewport.
<h3 class="govuk-heading-m">Three-quarters</h3>
<div class="govuk-form-group">
<label class="govuk-label govuk-!-width-three-quarters" for="full-name">
Full name
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="full-name" name="full-name" type="text">
</div>
<h3 class="govuk-heading-m">Two-thirds</h3>
<div class="govuk-form-group">
<label class="govuk-label govuk-!-width-two-thirds" for="full-name">
Full name
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="full-name" name="full-name" type="text">
</div>
<h3 class="govuk-heading-m">One-half</h3>
<div class="govuk-form-group">
<label class="govuk-label govuk-!-width-one-half" for="full-name">
Full name
</label>
<input class="govuk-input govuk-!-width-one-half" id="full-name" name="full-name" type="text">
</div>
<h3 class="govuk-heading-m">One-third</h3>
<div class="govuk-form-group">
<label class="govuk-label govuk-!-width-one-third" for="full-name">
Full name
</label>
<input class="govuk-input govuk-!-width-one-third" id="full-name" name="full-name" type="text">
</div>
<h3 class="govuk-heading-m">One-quarter</h3>
<div class="govuk-form-group">
<label class="govuk-label govuk-!-width-one-quarter" for="full-name">
Full name
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="full-name" name="full-name" type="text">
</div>{% from "input/macro.njk" import govukInput %}
<h3 class="govuk-heading-m">Three-quarters</h3>
{{ govukInput({
label: {
text: "Full name",
classes: "govuk-!-width-three-quarters"
},
classes: "govuk-!-width-three-quarters",
id: "full-name",
name: "full-name"
}) }}
<h3 class="govuk-heading-m">Two-thirds</h3>
{{ govukInput({
label: {
text: "Full name",
classes: "govuk-!-width-two-thirds"
},
classes: "govuk-!-width-two-thirds",
id: "full-name",
name: "full-name"
}) }}
<h3 class="govuk-heading-m">One-half</h3>
{{ govukInput({
label: {
text: "Full name",
classes: "govuk-!-width-one-half"
},
classes: "govuk-!-width-one-half",
id: "full-name",
name: "full-name"
}) }}
<h3 class="govuk-heading-m">One-third</h3>
{{ govukInput({
label: {
text: "Full name",
classes: "govuk-!-width-one-third"
},
classes: "govuk-!-width-one-third",
id: "full-name",
name: "full-name"
}) }}
<h3 class="govuk-heading-m">One-quarter</h3>
{{ govukInput({
label: {
text: "Full name",
classes: "govuk-!-width-one-quarter"
},
classes: "govuk-!-width-one-quarter",
id: "full-name",
name: "full-name"
}) }}You can configure this component using the Nunjucks macro arguments.
Using hint text
Use hint for help that’s relevant to the majority of users - like how their information will be used, or where to find it.
<div class="govuk-form-group">
<label class="govuk-label" for="national-insurance-number">
National insurance number
</label>
<span id="national-insurance-number-hint" class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
</span>
<input class="govuk-input govuk-input--width-10" id="national-insurance-number" name="national-insurance-number" type="text" aria-describedby="national-insurance-number-hint">
</div>{% from "input/macro.njk" import govukInput %}
{{ govukInput({
label: {
text: "National insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
classes: "govuk-input--width-10",
id: "national-insurance-number",
name: "national-insurance-number"
}) }}You can configure this component using the Nunjucks macro arguments.
Don’t disable copy and paste
Users often need to copy and paste information into a text input, so you shouldn’t prevent them from doing this.
Research on this component
If you’ve used this component, get in touch to share your user research findings.
Get in touch
If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team