Text input

When to use a text input

Use a text input when you need to let users enter a short amount of information. For example, their name or email address.

When not to use a text input

If you need to let users enter a long response, use the textarea instead.

If users need to enter a date, use the date input.

How text inputs work

Height and width

The height of text inputs is fixed and can only show a single line of text.

By default, the width of the text input is fluid and will fill the width of the container it is in.

<div class="p-form__form-group">
  <label class="p-form__label" for="input-standard">Label</label>
  <input
    type="text"
    name="input-standard"
    id="input-standard"
    class="p-form__input"
  />
</div>

Hint text

Text inputs can display hint text. Use hint text when you need to give users guidance on how to input content correctly.

Using hint text is optional.

See how to write hint text further down this page for best practice guidance.

<div class="p-form__form-group">
  <label class="p-form__label" for="input-hint">Label</label>
  <span class="p-form__hint">Hint text</span>
  <input type="text" name="input-hint" id="input-hint" class="p-form__input" />
</div>

Error messages

Text inputs can display an error message. It appears below the label or hint text. This creates a clear link between the error and:

• what is being asked
• any guidance on what information is required
• how to enter the information

Only display error messages after a user submits the form or clicks to continue to the next step. Do not validate inputs as users are typing as it can cause stress and frustration.

See how to write error text further down this page for best practice guidance.

<div class="p-form__form-group">
  <label class="p-form__label" for="input-error">Label</label>
  <span class="p-form__hint">Hint text</span>
  <span class="p-form__error">Error message text</span>
  <input
    type="text"
    name="input-error"
    id="input-error"
    class="p-form__input p-form__input--error"
  />
</div>

If your product is already handling errors in a different way

If you work in Parliament and need advice on presenting errors in this way, contact the Improving User Experience team on the #design-system Slack channel.

How to use text inputs

Update the relevant fields

To create a clear and accessible relationship between the <label> and the input:

• you must use the <label> element to clearly associate text with the input
• the for attribute of the <label> must exactly match the id of the input
• the id used for the <label> must also be unique from other form elements on the page

Grouping text inputs

If you need to group related text inputs together (for example, an address) then you must wrap all the inputs in a <fieldset>.

You must also add a <legend> as the first element within the <fieldset>. The legend is used to describe the group of inputs (for example, ‘What’s your address’).

<fieldset class="p-form__fieldset">
  <legend class="p-form__fieldset-legend">Legend</legend>
  <div class="p-form__form-group">
    <label class="p-form__label" for="input-fieldset-1">Label</label>
    <input
      type="text"
      name="input-fieldset-1"
      id="input-fieldset-1"
      class="p-form__input"
    />
  </div>
  <div class="p-form__form-group">
    <label class="p-form__label" for="input-fieldset-2">Label</label>
    <input
      type="text"
      name="input-fieldset-2"
      id="input-fieldset-2"
      class="p-form__input"
    />
  </div>
</fieldset>

Depending on the structure of your page you may need to set the <legend> as a heading.

<fieldset class="p-form__fieldset">
  <legend class="p-form__fieldset-legend">
    <h2>Legend</h2>
  </legend>
  ...
</fieldset>

Adjusting the width

Help users understand what they should enter by making text inputs the right size for the content they are intended for. For example, you may make shorter width inputs for postcodes or phone numbers.

<div class="p-form__form-group">
  <label class="p-form__label" for="input-fixed-width">Phone number</label>
  <input
    type="text"
    name="input-fixed-width"
    id="input-fixed-width"
    class="p-form__input"
    style="width: 200px"
  />
</div>

Entering numbers

If you are asking users to enter a whole number, set the inputmode attribute to numeric. Doing this will bring up the numeric keypad on devices with on-screen keyboards.

<div class="p-form__form-group">
  <label class="p-form__label" for="input-numeric">Enter a number</label>
  <input
    type="text"
    name="input-numeric"
    id="input-numeric"
    class="p-form__input"
    inputmode="numeric"
  />
</div>

If you are asking users to enter a number that might include decimal places, do not use inputmode="numeric" or inputmode="decimal".

Use the autocomplete attribute

Use the autocomplete attribute on text inputs to help users complete forms quickly. This lets you specify an input’s purpose so browsers can autofill the information on a user’s behalf if they have entered it before.

If there is a relevant input purpose, you must use the autocomplete attribute to meet WCAG 2.2 success criterion 1.3.5 Identify input purpose, level AA.

<div class="p-form__form-group">
  <label class="p-form__label" for="input-autocomplete">Email address</label>
  <input
    type="text"
    name="input-autocomplete"
    id="input-autocomplete"
    class="p-form__input"
    autocomplete="email"
    spellcheck="false"
  />
</div>

Do not disable copy and paste

Allow users to copy and paste information into a text input as this can make it easier to complete a form.

Do not use placeholder text

Do not use placeholder text in place of a <label> or hint text as:

• not all screen readers will read it out
• it disappears when a user selects the input making it hard for them to remember what it said

Disabling spellcheck

Browsers often spellcheck the information users enter into text inputs. They then visually highlight anything considered to be an error.

Some information might not be appropriate to spellcheck, for example a name or email address. In these instances, you should disable spellcheck. To do this set the spellcheck attribute to false.

<div class="p-form__form-group">
  <label class="p-form__label" for="input-spellcheck">Full name</label>
  <input
    type="text"
    name="input-spellcheck"
    id="input-spellcheck"
    class="p-form__input"
    autocomplete="name"
    spellcheck="false"
  />
</div>

Placing a button next to a text input

Always place buttons to submit or continue with a form at the bottom of the form. Use the primary button for these options.

Sometimes it may be necessary to place a button next to a text input to perform a specific action related to the input. For example, showing or hiding a password to check that it has been entered correctly.

If you need to do this, use a secondary button and place it to the right of the text input.

<div class="p-form__form-group">
  <label class="p-form__label" for="input-button">Label</label>
  <div class="p-form__input--with-button">
    <input
      type="text"
      name="input-button"
      id="input-button"
      class="p-form__input"
    />
    <button class="btn btn-secondary">Text</button>
  </div>
</div>

Do not use the disabled state attribute

Do not use the disabled state attribute as it can cause issues for users. Disabled inputs are often not distinguishable from active ones, and they do not tell users why they cannot interact with them.

Instead, allow users access to all inputs, even if that means that after trying to submit or continue with a form it fails. Use error messages to then help users understand what they need to do to fix the problem. Using error messages also follows best practice guidance for creating accessible interfaces.

If users must submit information in a specific order, consider using a multistep form.

Displaying previously submitted information

Do not use the disabled state to display previously submitted information. This can confuse users as they may not realise that they cannot change the information.

Instead, consider displaying the information as standard text.

How to write hint text

Keep hint text to a single short sentence, without any full stops.

Do not include links within hint text. While screen readers will read out the link text when describing the field, they will not tell users that the text is a link.

How to write error text

Error messages must explain what went wrong and how to fix it.

Make sure to follow the error message guidance or use the specific error messages below to help your users.

Specific error messages for specific error states

If the input is empty

Say ‘Enter [whatever it is]’.

For example, ‘Enter your first name’.

If the input is too long

Say ‘[whatever it is] must be [number] characters or fewer’.

For example, ‘Address line 1 must be 35 characters or fewer’.

If the input is too short

Say ‘[whatever it is] must be [number] characters or more’.

For example, ‘Full name must be 2 characters or more’.

If the input has both a minimum and maximum length

Say ‘[whatever it is] must be between [number] and [number] characters’.

For example, ‘Last name must be between 2 and 35 characters’.

If the input uses characters that are not allowed and you know what the characters are

Say ‘[whatever it is] must not include [characters]’.

For example, ‘Town or city must not include % and £’.

Support all the characters the user might need to enter, including numbers and symbols.

If the input uses characters that are not allowed and you do not know what the characters are

Say ‘[whatever it is] must only include [list of allowed characters]’.

For example, ‘Full name must only include letters a to z, hyphens, spaces and apostrophes’.

Support all the characters the user might need to enter, including numbers and symbols.

If the input is not a number

Say ‘[whatever it is] must be a number [optional example]’.

For example, ‘Hours worked a week must be a number, like 30’.

If the input requires a decimal, use a decimal in the example. If the input allows both whole numbers and decimals, use both in the example.

If the input is not a whole number

Say ‘[whatever it is] must be a whole number [optional example]’.

For example, ‘Hours worked a week must be a whole number, like 30’.

If the number is too low

Say ‘[whatever it is] must be [lowest] or more’.

For example, ‘Hours worked a week must be 16 or more’.

If the number is too high

Say ‘[whatever it is] must be [highest] or fewer’.

For example, ‘Hours worked a week must be 99 or fewer’.

If the input must be between 2 numbers

Say ‘[whatever it is] must be between [lowest] and [highest]’.

For example, ‘Hours worked a week must be between 16 and 99’.

If the input is an amount of money that needs decimals

Say ‘[whatever it is] must include pence, like 123.45 or 156.00’.

For example, ‘How much you earn a week must include pence, like 123.45 or 156.00’.

If the input is an amount of money that must not have decimals

Say ‘[whatever it is] must not include pence, like 123 or 156’.

For example, ‘How much you earn a week must not include pence, like 123 or 156’.