Text Box

A text box is an input control that allows users to enter text.

Also known as: Text Area, form field, text entry box

Example

See the Pen Text Input and Textarea (Text Box) by SHC-FED (@SHC-FED) on CodePen.0

Design Specs

Desktop/Tablet/Mobile

Text box specs

  1. Text boxes are 36px in height with a #d0d0d0 stroke of 1px around the right, bottom and left sides of the box. The top of the text box as a 2px stroke of #666666.
  2. In focus text boxes have a #0670a4 stroke of 1px around the right, bottom and left sides of the box. The top of the text box as a 2px stroke also of #0670a4.
  3. Text box labels are Open Sans Semi Bold at #001733. Supportive label text (e.g. optional, required) are set at Open Sans Italic #666666. 20px spacing
    • For Desktop, the font size of text box labels are 15px. Supportive label text is 13px.
    • For Mobile, the font size of text box labels are 14px. Supportive label text is 12px.


Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Production Examples

  • Sears
  • Kmart

Desktop/Tablet/Mobile

Desktop/Tablet/Mobile

When Do I Use This?

Use text boxes when you need users to enter information such as name, address, credit card information. Each field has a label above it describing what goes in said field

Usage Guidelines

1. Active Form Fields

Active form fields should be styled to indicate that they are in focus.

Form text field highlighted to show it's in focus.

Form text field does not have a focus indication.

2. Field Width

Make sure the width of your field is appropriate for the type of information being entered. Do not make them equal length.

Multiple text fields whose widths conform to their data types.

Multiple text fields that have the same length despite their data types.

3. Required and Optional Labels

Label all fields as required or optional. Exceptions are login in forms where it is known that both user name and password are required and single element forms (e.g. search).

Form text field that are each labelled either required or optional.

Form text field with missing required or optional label.

4. Label Placement

Place labels above text box, not inside or to the left.

Form text fields with labels above the text box.

Form text fields with labels next to the text box.

Form text fields with labels inside the text box.

5. Capitalization

Labels should follow Title case, not sentence, lower, or all upper cases.

Form text fields with labels written in with title case.

Form text fields with labels in sentence case.

ADA Compliance

Accessible text boxes, sometimes referred to as input boxes or text fields, must always have a label element. Input fields without accompanying labels can lead to accessibility issues for those who rely on screen readers. For this reason, labels or instructions must be provided when content requires user input. Labels need to describe the purpose of the form control.

According to the Neilsen group study, text box placeholders are bad for accessibility. Three of the biggest problems for accessibility are as follows:

  1. The lighter color normally used for placeholder text has poor color contrast against most backgrounds. For users with a visual impairment, poor color contrast makes it difficult to read the text. Because not all browsers allow placeholder text to be styled using CSS, this is a difficult issue to mitigate.
  2. Users with cognitive or motor impairments are more heavily burdened. As we saw, placeholders can be problematic for all users: disappearing placeholders increase the memory load; persistent dimmable placeholders cause confusion when they look clickable but aren’t, and placeholders that do not disappear require more keyboard or mouse interaction to be deleted. These difficulties are magnified for people with cognitive or motor impairments.
  3. Not all screen readers read placeholder text aloud. Blind or visually impaired users may miss the hint completely if their software does not speak the placeholder content.
Useful Links:

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.