Text Field

Figma | Storybook

Overview

Text fields are form controls that allow users to enter text.

Other names: Textbox, input field, text input

Behaviors

Focus

A focus state replaces the browser default focus state for text fields. The border also changes color on focus.

Clearing text

A clear icon appears in the right side of the text field if one or more characters has been entered.

Selecting the clear icon resets the text field back to its default. It removes the text values and resets any character counts shown. The clear icon has a tooltip of "clear" added to the label of the text field. If the field label is System Name, the tooltip would be Clear system name.

Error

Error states in a text field change the color of the border and display an error message below the field. There are different reasons for a text field error state. Required fields and formatting conditions, (e.g., when a user needs to enter a certain number of characters), are two examples.

With formatting errors, the text field border returns to normal and the error message is immediately removed once the user addresses the error. Required fields errors are only resolved once the user has fixed the issue and moved on to another area of the screen.

It’s possible for both an error and instructional text to display at the same time. When this happens, the error message appears below the instructional text.

Disabled

When disabled, the field is shown with a darkened background with 50% opacity. The field can’t be selected, focused, or interacted with in any way. A disabled field should be shown unfilled if the field was originally empty.

Text with 50% opacity would be too hard to read, so if a disabled text field needs pre-filled content, use a label/value pair instead.

Help text

Text field labels can give extra context or instructions using a help text component. This appears as a question mark icon to the right of the label.

Instructional text

Instructional text appears below the field. It shouldn't be italicized as italic font isn't readable. It shouldn't extend past the text field and only be used for very short messages. If more instruction is needed, use help text. For more guidance on how to write instructional text, go to the content section below.

Kendo Hints and Errors

It’s possible for both an error and instructional text to display at the same time. When this happens, the error message appears below the instructional text.

Character limits

All text fields should have a maximum character limit. The default is 255 characters, but it should be chosen with the field context and database restrictions in mind.

The character limit appears to the right of the text field if at least 80% of the character limit has been reached. The limit lets the user know how many characters are left. If the user goes past the limit, the field shows an error state until the user removes characters.

Variations

Default

A form input field that only allows one line of text to be entered. If a user is entering only a few words or a brief sentence, a default, single-line text field is recommended.

Multi-line

A text area that allows multiple lines of text. As a multi-line text field expands to fill the content entered, it pushes down form elements below it. On page load, a multi-line text field is expanded enough to show all content entered.

If you expect a user will need to enter a lot of text (multiple sentences) into a text field, use the multi-line variation.

Optional and required

Required fields should be labeled (Required), Optional fields can be tagged (Optional). You can choose to only label the fields that are in the minority. For example, if there are only 2 optional out of 10 entries, only the optional ones would be tagged.

Typeahead

Text fields can suggest options to users as they type. This is known as typeahead or autocomplete. The options can either be presented inline or as a drop-down. Use drop-down, unless there are only a few options and space is limited.

Usage guidelines

Minimum and maximum width

Text fields have a minimum width of 400px and a maximum width of 620px, whenever possible.

Content guidelines

Label The purpose of the label is to tell users what information they need to enter. Labels should be short and use title case. Text field labels are typically descriptive nouns. If the label is a term that’s not widely recognized, or you think users might benefit from more information, you can use a help text component to define the label or add additional context.

Instructional text Instructional text appears above the text field, below the label. Instructional text can be added to give users more direction or specific guidance on what type of information they should be entering. It should be short and verb-first. It’s not meant to replace the label or be used for examples.

👍
Try this

Enter a valid email address.

Choose a unique name you’ll remember.

❗️
Not this

Days Disconnected

e.g. Connector Name

Placeholder text

Placeholder text goes inside the field and disappears when the user starts typing. Use placeholder text sparingly as it’s not usable or accessible. Placeholder text shouldn’t just repeat the information that’s in the label or instructional text. Use placeholder text to give an example of what the user should enter, or to ask a question or give a suggestion.

👍
Try this

e.g., [email protected]

What can we help you with?

❗️
Not this

Enter your email address

Search

Icon

An icon can be paired with a text field. This icon appears inside the text box and is left-aligned.The text input is indented enough to not cover the icon. Use icons with clear meanings and that are recognizable, like a magnifying glass for search. Text field icons are not interact-able or in a changed state.

Error message

The success or error text that appears below the text field should be concise and helpful. It shouldn't exceed the width of the text field. Error messages can explain what happened, without using error code or jargon, and give users instructions on how they can resolve the error. If the field has instructional text, the error message appears below it.