Overview

The Input Field provides the ability to enter and edit text and numbers in a single-line, multi-line, or range. In addition, it provides label placement, required field indicator, and help text for all form layout controls including Date/Time Input and Combo Box.

• Format masks can be applied to constrain the input so that only a valid string can be entered (eg. Zip Code, Phone Number, etc.). The hint text indicates the format mask user needs to follow.

Usage

Use an Input Field any time the user can enter text or numeric data. Use a format mask to help user enter data that needs to be formatted for specific needs.

Alternatives

• Combo Boxes - Use provide ability to select value from a list.
• Date/Time Input - Use to provide ability to select a date or time.

Types

Single

• Text
• Number
• Dates

Range

• Number
• Dates

Multiline

• Text

Options

• Label - None, place above field, or to the left of the field.
• Hint Text - Used inside the text box to indicate the mask or provide a prompt.
• Required Indicator - Use to let users know they need to fill the field before completing the page or modal.
• Assistance Text - Use to instruct users about specific criteria for the entered information or, after entering data, what they need to do if it is incorrect.
• Format Mask - Use to help user format data to what the systems needs.
  • Free Text (alphabetic and/or numeric) Mask
  • Dollar Value Mask
  • Percent Mask
  • SSN
  • Zip Code
  • Phone Number
  • Date/Time
  • Time

---

References

Visual and Interaction spec
Accessibility and Keyboard Access