A text field includes a label and an input field you can type text into.
- Autocomplete (not built)
- Button Group (not built)
- Checkbox Field
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Field
- Radio Group
- Rich Text Editor
- Search Field
- Split Button
- Text Area Field
- Text Field
- Tile Grid
- Toast Notification
- Toggle Switch Field
- Most of the time, we validate text fields on “blur” (when leaving the text fields) or on form submission as needed. We don’t validate on key strokes.
- As a rule of thumb, generally use “ (optional)” to indicate optional fields instead of “
*” to indicate required fields.
- Consider if a more specific
typeis needed as an
- When displaying a validation messages, such as an error, use a
aria-describedbyattribute to associate the text field with the element containing the validation message.
- Pre-fill the Text Field input with good defaults wherever possible.
- Disabled state:
To be scannable and fully helpful, a text field must have an associated label and must contain an example of the text you wish the user to input. Here’s what you should know:
Make sure your text field has a short, descriptive label above it that describes what the user should type into the box below. Avoid phrasing your labels as questions. Keep in mind that your label shouldn’t contain instructions. Reserve those for the helper text.
- Email address
- Enter your email address here
Make sure that any text inside the field box serves as an example of what the user should type into the box. Don’t put any instructions inside the box.
- e.g. email@example.com
- Enter your email address here
Keep in mind that examples aren’t always required. For example, a text field asking for someone’s first name doesn’t need an example like “e.g. Bob” in it. Only use placeholder text when required. More often than not, blank text fields are easier to spot and scan.
Keep all error text short, useful and to the point.
- Dates needs to be MM/DD/YYYY
- You entered an invalid date format
Helper text placed below the field can include further instructions or information on how to fill out the text field. It can also include details on what will happen with the filled out information. Don’t put placeholders here.
- Your email address will be used to send you survey notifications and reports
- For example, firstname.lastname@example.org
All text field copy should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.
- Use Text Fields to gather short text input.
- Avoid gathering input from users that isn't absolutely necessary.
- For longer text input, used a Text Area Field instead.
Here are some examples from elsewhere:
On this page