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 a 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, as it vanishes when users click on the text input.

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 1 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.

Using hint text

Use hint text to give users help in context; for example, only enter your first name.

Example: input with a hint

Please enter in years

React
HTML

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

Error messages

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
/>

When to use an error message

Show an error message using the hint text when there is a validation error.

Use standard messages for different components.

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.0 )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.1 1.4.11).
  • Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Research/evidence

We tested the textarea component on a "Identity and Access Management" prototype in April 2019. Users understood the purpose of the textarea 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, contact the team.