Text Input Boxes

A text input box is a single- or multi-line area in which users can enter text.

Guidelines

  • Set the width of the text input box to a size that covers most of the use cases.  By default, a text input box grows or shrinks as the user resizes the window.
  • Put a placeholder inside the text box when you want to show the required format.  Placeholder text appears when the text box does not have input focus, and the text box is empty.

  • To avoid clutter, don't mark a required or mandatory text input box (one that must have a valid value before the user can proceed). Use validation to highlight missing or invalid values.
  • Optionally, if the text input box is not required (can be empty and the user is still allowed to proceed), mark it "Optional" as follows:

  • Left-justify the label above or to the left of the text input box.  A multiline text box often looks better with the label above—this placement gives more horizontal space to the text box and lines it up better with other controls.
  • Use sentence-style capitalization and end in a colon.
  • Strive to keep the label text to a single line. If the label wraps to another line, for example for internationalization reasons, align the text box with the bottom line of the label.
  • If the text input box accepts numeric input use a plural label, even if the  value can be "1". For example:

    Plural labels for numeric form items are OK
     
  • Don't put a tooltip on a text input box.  Use signpost help instead.

Visual Specification

Prompt Text and Disabled Text Input Box

Instructional Text

Optional Text

Related Topics

Average (0 Votes)