Guidelines for text input

Applies to Windows and Windows Phone

A sample of what a standard text input box control looks like

Description

A text input box lets the user enter and edit a text or numeric value via the physical or on-screen keyboard. Using text wrapping, a text input box can be configured to accept a single line or multiple lines of text.

A text input box is composed of a rectangular border with an editable text area within it. On a touch-enabled device, the on-screen keyboard appears when the text input box receives focus.

Example

A screenshot that illustrates the standard text input box control

Is this the right control?

Text input controls let users enter and edit a text or numeric value. Consider these questions when deciding whether to use a text input control.

  • Is it practical to enumerate all the valid values efficiently? If so, consider using one of the selection controls instead, such as a check box, drop-down list, list box, radio button, slider, toggle switch, date picker, or time picker.
  • Is there a fairly small set of valid values? If so, consider a drop-down list, or a list box, especially if the values are more than a few characters long.
  • 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 input control. You can limit the number of characters that can be entered, and you can choose from a list of input scopes, which limit the input to a particular character set or format—for example, a number, a Uniform Resource Identifier (URI), or a currency.
  • Does the value represent a data type that has a specialized common control? If so, use the appropriate control instead of a text input control. For example, use a DatePicker instead of a text input control to accept a date entry.
  • If the data is numeric:
    • Is the value being entered is approximate, and/or relative to another quantity on the same page? 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 an accompanying control.
    • Is the value entered likely to be adjusted after the result is observed—for example, volume or brightness is being set? If so, use a slider.

Dos and don'ts

  • If it’s not obvious what the user should type into a text input box, or if there are any constraints on input, then set a label, or placeholder text. A label is visible whether or not the text input box has a value. Placeholder text is displayed inside the text input box and disappears once a value has been entered.
  • Consider giving the control a width that’s appropriate for the range of values that can be entered. Bear in mind that word length can vary between languages, so take localization into account.
  • A text input box is typically single-line (text wrapping off). When users need to enter or edit a long string, set the text input box to multi-line (text wrapping on).
  • Generally, you use a text input box for editable text. But you can make a text input box read-only so that its content can be read, selected, and copied, but not edited.
  • If you need to reduce clutter in a view, consider making a set of text input boxes appear only when a controlling checkbox is checked. You can also bind the enabled state of a text input box to a control such as a checkbox.
  • Consider how you want a text input box to behave when it contains a value and the user taps it. The default behavior is appropriate for editing the value rather than replacing it—the insertion point is placed between words and nothing is selected. If replacing is the most common use case for a given text input box, you can select all the text in the field whenever the control receives focus; typing replaces the selection.
  • If you want to limit the input to a particular character set or format—for example, a number, a URI, or a currency—set the input scope appropriately. This determines which on-screen keyboard is used.

Single-line input boxes

  • Use several single-line text boxes to capture many small pieces of text information. If the text boxes are related in nature, you should group them together.

  • Make the size of your single-line text boxes slightly wider than the longest anticipated input. If doing so makes the control too wide, separate it into two controls; for example, you could split a single address input into "Address line 1" and "Address line 2".
  • Set a maximum length. If the backing data source doesn't allow a long input string, limit the input and use a validation popup to let users know when they reach the limit.
  • Use single-line text input controls to gather small pieces of text from users.

    The following example shows a single-line text box to capture an answer to a security question. The answer is expected to be short, and so a single-line text box is appropriate here. Because the information collected does not match any of the specialized input types that Windows recognizes, the generic "Text" type is appropriate.

    Basic data input

  • Use a set of short, fixed-sized, single-line text input controls to enter data with a specific format.

    Formatted data input

  • Use a single-line, unconstrained text input control to enter or edit strings, combined with a command button that helps users select valid values.

    Assisted data input

  • Use a single-line, number input control to enter or edit numbers.
  • Use a single-line password input control to enter passwords and PINs securely.

    Password and PIN input
  • Use the single-line email input control to enter an email address.

    Email input

    When you use an email input control, you get the following for free:

    • When users navigate to the text box, the touch keyboard appears with an email-specific key layout.
    • When users enter an invalid email format, a dialog appears to let them know. Email input
  • Use the URL input control for entering web addresses.
  • Use the telephone number input control for entering telephone numbers.
  • Don't use a text area with a row height of 1 to create a single-line text box. Instead, use the text box.
  • Don't use placeholder text to pre-populate the text control. Text boxes clear placeholder text when users use the control. Use the "value" attribute instead.
  • Don't use a text box as a search box. It's common practice in web pages to use an input element to create a search box. However, you create a much better and more consistent experience when you use the Search charm instead. The Search charm provides a consistent searching experience that your app can plug into. For more info, see Adding search.
  • Don't put another control right next to a password input box. The password input box has a password reveal button for users to verify the passwords they have typed. Having another control right next to it might make users accidentally reveal their passwords when they try to interact with the other control. To prevent this from happening, put some spacing between the password in put box and the other control, or put the other control on the next line.

Multi-line text input controls

  • When you create a rich text box, provide styling buttons and implement their actions. (Windows Store apps using JavaScript don't automatically provide these controls for you. )
  • Use a font that represents the feel of your app.
  • Make the height of the text control tall enough to accommodate typical entries.
  • When capturing long spans of text where users are expected to keep their word count or character count below some maximum, use a plain text box and provide a live-running counter to show the user how many characters or words they have left before they reach the limit. You will need to create the counter yourself; place it near the text box and update it dynamically as the user enters each character or word.

    A long span of text

  • Don't let your text input controls grow in height while users type.
  • Don't use a multi-line text box when users only need a single line.
  • Don't use a rich text control if plain text is adequate.

Additional usage guidance

Use a text input box to let the user enter a text value, or to edit a value already entered. If the input needs to be constrained, that's possible, too. You can limit the number of characters that can be entered, and you can choose from a list of input scopes, which limit the input to a particular character set or format—for example, a number, a URI, or a currency.

Choosing the right multi-line text input control

When users need to enter or edit long strings, use a multi-line text control. There are two types of multi-line text input control: the plain text input control and the rich text control.

  • If the primary purpose of the multi-line text box is for creating documents (such as blog entries or the contents of an email message), and those documents require rich text, use a rich text box.
  • If you want users to be able to format their text, use a rich text box.
  • When capturing text that will only be consumed, and not redisplayed at a later time to users, use a plain text input control. For example, suppose you have a survey; the user completes the survey and the data is sent to some server, but the user doesn't ever see it again. It is generally unnecessary to allow users to style this text.
  • For all other scenarios, use a plain text input control.

Related topics

For designers
Guidelines for spell checking
Adding search
For developers (HTML)
input type=text element | input type=text object
textArea element
contenteditable
For developers (XAML)
TextBox class

 

 

Show:
© 2014 Microsoft