Components

Text Input

Overview

Overview

When to use

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 email address.

When not to use

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.

Principles

Text inputs should always have labels, and in most cases the label should be visible.

Do not use placeholder text in place of a label, or for hints or examples, as:

• it vanishes when the user starts typing, which can cause problems for users with memory conditions or when reviewing answers
• not all screen readers read it out
• its browser default styles often do not meet minimum contrast requirements

Help users understand what they should enter by making text inputs the right size for the content they’re intended for.

Size

Regular size should be used in most cases. Compact size can be used in very dense interfaces or large data tables.

Regular size

Compact size

Required indicator

Hint text

Error message

Disabled state

Usage

Usage guidelines

Alignment

Align label with the field box.

Do

Don't

Labels

Do not use placeholder text as a label.

Do

Don't

Accessibility

Keyboard

The text input is a native input type="text": Tab focuses it and typing edits it. Nothing is added by script.

Screen readers

The input is labelled by the visible label (for/id). Hint and error text are linked through aria-describedby, so they are read after the label when the field gets focus. In the error state the input has aria-invalid="true" and screen readers announce it as invalid.

Using the example

• Always pass a title. Without one the template renders no label, and a placeholder is not a substitute: it disappears on typing and is not reliably announced.
• Ids must be unique per page. The hint and error ids (<id>-hint, <id>-error) are derived from the input id.
• Pass autocomplete (for example name, email, street-address) whenever the field asks for the user's own data (WCAG 1.3.5).
• Write error messages that say how to fix the problem, and show them only after the user has had a chance to fill the field.
• The required asterisk (titleRequired) is visual only. Add required or aria-required="true" to the input yourself, and explain the asterisk once at the top of the form.
• Estonian forms embedded in a page in another language need lang="et" on the form container so the label is pronounced correctly.