Text Input

 
Example 1: Simple Text Input Field

What It Is

A text box provides an input for users to enter or edit a text or numeric value.

When to Use

Whenever you need to provide users with a space for entering a relatively unconstrained, free-form value.

Is This the Right Control?

The following guidelines come from the Microsoft UX Guide:

  • Is it practical to enumerate all the valid values efficiently? If so, consider a single-selection list, list view, drop-down list, editable drop-down list, or slider instead.
  • Is the valid data completely unconstrained? Or is the valid data constrained only by format (constrained length or character types)? If so, use a text box.
  • Does the value represent a data type that has a specialized common control? Examples include date, time, or IPv4 or IPv6 address. If so, use the appropriate control, such as a date control rather than a text box.
  • If the data is numeric:
    • Do users perceive the setting as a relative quantity? If so, use a slider.
    • Would the user benefit from instant feedback on the effect of setting changes? If so, use a slider, possibly along with a text box. For example, users can easily choose a color using a slider because they can immediately see the effect of changes to hue, saturation, or luminosity values.

Design Concepts

The following guidelines come from the Microsoft UX Guide:

While text boxes have the benefit of being very flexible, they have the drawback of having minimal constraints. The only constraints on an editable text box are:

  • You can optionally set the maximum number of characters.
  • You can optionally restrict input to numeric characters (0-9) only.
  • If you use a spin control, you can limit spin control choices to valid values.

Aside from their length and the optional presence of a spin control, text boxes don't have any visual clues that suggest the valid values or their format. This means relying on labels to convey this information to users. If users enter text that's not valid, you must handle the error with an error message.

As a general rule, you should use the most constrained control that you can. Use unconstrained controls like text boxes as a last resort. That said, when you are considering constraints, bear in mind the needs of global users. For example, a control that is constrained to United States ZIP Codes isn't globalized, but an unconstrained text box that accepts any postal code format is.