Text Input

Ready

Text inputs are input fields typically used in forms that allow the user to enter text data in a structured format.

Code

Usage

Specifications

Usage

Use text inputs in forms to help people enter, select and search for text. Common text input types include: usernames, descriptions, URLs, phone numbers, credit cards, emails, addresses or plain text searches.

Do's

Do use fixed-width inputs for content that has a specific, known length (e.g. postcode, phone number).
Do use sentence for any input text case with standard, local grammar and punctuation rules.
Do use helpful and clear text for labels, error messages and helper texts.

Don'ts

Do not use text input for text longer than a single line (e.g. name, phone number). Use the textarea instead.
Do not disable copy and paste.
Do not display a pop-up error message after validating.
Avoid masking label, keep it always visible.

Content

Actions

Clearing content

Clear actions allow user to remove the content of the text input.

Example of text input with a clear content action button

Custom actions

Text inputs can have an additional custom action.

Example of text input with an additional action

Prefixes and suffixes

Prefixes and suffixes help the user to understand the purpose of the text input.

Helper text

Helper text can be used as additional instructions to the user when filling in the form. It should be always visible even in a focus state.

Usage

Do:

Keep helper text as short and specific as possible.
Only use helper text when truly necessary to avoid overloading the user.
Should give an example or an explanation of the field.

Don't:

Helper text should not run longer than the input area.

Autosuggest

Suggests a list of options to fill a text input. A user can either select a suggestion or enter their own answer.

Usage

Use the suggestions to help users select from a list of standard responses when needed.
If the value for the textbox must be chosen from a predefined set of allowed values, use the select component instead.
Keep suggestions simple and avoid scroll.