Text Inputs
An entry box that enables the user to input text information.
Types
Text fields are used for web-based forms to input data and control widgets.
Guidelines
Text inputs are recommended when users are required to enter a single line of data—for example, their name or contact information.
Anatomy
- Label: The label of an input area is often positioned to the left. The label specifies the sort of information needed.
- Input field: Input container for data entered by users.
- Input text: This field contains the content entered by the user.
- Helper text: (Optional) Describes how to enter or format text.
Specifications
Width
By default, the text input width is fluid and should fit the width of the container they are placed.
Fixed widths should only be used if a particular input type has a known and set specific length—for example, postal codes and telephone numbers.
Height
The text input height should allow some flexibility based on its application. With this in mind, we are proposing three heights: small, medium, and large.
- Small: 32px
- Medium: 40px
- Large: 48px
Placeholder text
Placeholder text should not be overused, as for most form fields it’s not helpful. Do not use placeholder text to indicate formatting, use helper text below the field instead.
Required fields
Required fields are indicated by a asterix(*). It should be noted, however, that certain screen readers will not announce them. Along with the asterisk, the content should include a note stating that all fields are required. If an input in the form is considered “optional” try to include the language in the label, aria label, or the HTML so screen readers will announce it.
- Allow users to paste in their response.
- Use appropriately-sized text inputs.
- Include an associated label with a corresponding ID left-align text areas (as well as their labels and hint text).
- Let user specify a numeric value in steps.
- Truncate or hide any label text .
- Let label text take up multiple lines.
- Limit the number of characters a user can input.