Text Fields
Last updated: September 14, 2015 at 20:02 pm

Basic input fields for entering text.

Visual example of the element:

What problem does this element or pattern solve?
This field type is also the most prone to input errors. Defining input validation rules and when validation will occur may occupy a great deal of attention.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Carefully define the visual styling of your text input boxes. Provide specifications on background color, borders, interior shading, font sizes, font color, etc.
  • Will your text form fields be set to a consistent width? Or will the width vary, providing a visual cue for the proper input (i.e. zip code fields with maximum 10 characters)
  • For multi-line input fields, such as comments, how will scrolling be handled?
  • Be sure to provide cross-referenced links to the other necessary standards required to create fully functional forms. These might include validation, error messages, form labels, auto-suggest, and others.

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
form fields, answer fields, text boxes
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply