- 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.
- 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.
- 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.
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
1. Active Form Fields
Active form fields should be styled to indicate that they are in focus.
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.
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).
4. Label Placement
Place labels above text box, not inside or to the left.
Labels should follow Title case, not sentence, lower, or all upper cases.
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:
- 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.
- 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.
- 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.