NICE Design System home

Text input

The text input lets users enter a single line of text.

When to use

Use a text input when you need users to enter text that's no longer than a single line, such as their name or phone number.

When not use

Do not use a text input if you need users to enter longer answers that might span several lines. In this case, use the textarea.

How to use

Example: standard input

React
HTML

_10
<Input label="First name" name="firstname" />

Give text input a visible label.

Do not use placeholder text for a label, it vanishes when users click on the text input and not all screen readers read it out.

Align labels above the text inputs they refer to on screen. Labels should be short, direct and written using sentence case. Do not use colons at the end of labels.

If you are asking just one question per page, as we recommend, you can set the contents of the label as the page heading. It is good practice as it means that screen reader users will only hear the contents once.

Do not disable copy and paste

Users often need to copy and paste information into a text input, so do not stop them from doing this.

Grouped text inputs

Multiple related text inputs will use the Form group component.

The form group:

  • wraps the inputs in a <fieldset> with a <legend> that describes the group
  • allows you to add hint text that applies to the entire group.

Example: grouped text inputs

What is your address
React
HTML

_10
<FormGroup legend="What is your address">
_10
<Input label="Address line 1" name="address-line-1" />
_10
<Input label="Address line 2" name="address-line-2" />
_10
<Input label="Town or city" name="address-town" />
_10
<Input label="County" name="address-county" />
_10
<Input label="Postcode" name="address-postcode" />
_10
</FormGroup>

Using hint text

Use hint text to give users help in context; for example, enter your full address, including postcode.

Keep hint text short and simple.

Do not use links in the hint text. While screen readers will read out the link text when describing the item, they usually do not tell users the text is a link.

Hint text can be added to both:

  • An individual text input.
  • The overall group of inputs in the form group.

Individual input hint text

Add hint text to individual text inputs to provide additional context or help.

Example: input with a hint

Please enter in years

React
HTML

_10
<Input label="Age" name="age" hint="Please enter in years" />

Grouped inputs hint text

Add hint text to the group of text inputs to give context or help about the overall group.

Example: Grouped inputs with a hint

What is your address

This should be a UK address

React
HTML

_10
<FormGroup legend="What is your address" hint="This should be a UK address">
_10
<Input label="Address line 1" name="address-line-1-hint" />
_10
<Input label="Address line 2" name="address-line-2-hint" />
_10
<Input label="Town or city" name="address-town-hint" />
_10
<Input label="County" name="address-county-hint" />
_10
<Input label="Postcode" name="address-postcode-hint" />
_10
</FormGroup>

Asking complex questions

If you're asking complex questions that needs a detailed explanation, don't use hint text, instead use:

  • a heading that's a statement (for example, ‘Interview needs’) rather than a question
  • whatever mix of text, paragraphs, lists and examples best explains your question to the users
  • a label, above the form input, that asks users a specific question – for example, ‘Do you have any interview needs?’.

Error messages

Error messages are displayed like this:

Example: input with error

Please enter your surname

React
HTML

_10
<Input
_10
label="Surname"
_10
name="surname"
_10
error
_10
required
_10
errorMessage="Please enter your surname"
_10
/>

The error message appears in red after the question text and any hint text.

Do not clear any form fields when showing the error message. Keep both passing and failing answers.

Keeping information that caused the errors helps users to:

  • see what went wrong
  • edit their previous answer
  • avoid re-entering information.

When not to use error messages

Only display an error when someone tries to move to the next part of the form or service.

Do not show error messages:

  • when users select or tab to a field
  • when users type into a field
  • when they move away from a field.

Accessibility

Component meets WCAG AA guidelines for accessibility on:

  • Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.2 - 1.4.3).
  • UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.2 - 1.4.11).
  • Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.2 - 1.4.1).

Research/evidence

We tested the text input component on a “Identity and Access Management” prototype in April 2019. Users understood the purpose of the text input and were able to use it.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, content the team.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.