Design
Component checklist
Up to date
React
Up to date
Overview
There are instances, for example, within a web form, where you need users to enter both short and long-form content. In such cases, use the size of the text input box to reflect the length of the content you expect the user to enter.
Input
Status property doesn't exist for components
Please create Status custom property in Components section in administration first. Without this custom property, this block has no data to display.
Please create Status custom property in Components section in administration first. Without this custom property, this block has no data to display.
Use when the expected user enters a single line of text, as opposed to a paragraph.
Text area
Status property doesn't exist for components
Please create Status custom property in Components section in administration first. Without this custom property, this block has no data to display.
Please create Status custom property in Components section in administration first. Without this custom property, this block has no data to display.
Use when the expected user enter is more than one sentence.
Formatting
Anatomy
-
Title (optional)
The title helps users understand what information to enter into a text input. Placeholder text in lieu of a title is sometimes used as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues. -
Input area
The input area is a space for users to enter a value. -
Placeholder
Placeholder text provides hints or examples of what to enter. It disappears after the user enters data into the input and should not contain crucial information. Use sentence-style capitalization, and in most cases, write the text as a direct statement without punctuation. -
Explanation icon
The explanation icon complements an error message. It can be used only in combination with text inputs. -
Error message
The error message communicates pertinent information that assists the user in completing a field in the right way. Error message appears when the inputted value is wrong and the input loses its focus state. The error message appears underneath the input area and, in the case of the input, is supported by icon number 4. For error messages, use sentence-style capitalization, and in most cases, write the text in full sentences with punctuation according to the content guidelines.
Default values
Where possible, add programmatic assistance. Detect and pre-fill inputs to reduce errors and save time. When the software can’t determine the value that belongs in an input, use type-ahead to make suggestions. Use sentence-case for default values and detected values.
Validation and errors
Validation helps streamline the process and keep data clean when the user fills out forms.
Character count
Inputs and text areas may have a character limit and counter. Use the character limit and counter to let users know how long their entry can be before they begin typing.
Character count allows users to understand an input error if they surpass the character limit.
Content
Titles
Effective form titling helps users understand what information to enter into a text input. Using placeholder text in lieu of a title is sometimes employed as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.
Accessibility best practices for labels
- The title must be visible when an input gets focused.
Placeholder text
Placeholder text provides hints or examples of what to enter. It disappears after the user begins entering data into the input and should not contain crucial information. For placeholder text, use sentence-style capitalization, and in most cases, write the text as a direct call-to-action statement without punctuation.