Guidelines for text input
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.
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.
- 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.
Use a set of short, fixed-sized, single-line text input controls to enter data with a specific format.
Use a single-line, unconstrained text input control to enter or edit strings, combined with a command button that helps users select valid values.
- 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.
Use the single-line email input control to enter an email address.
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.
- 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
- 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.
- 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.
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.
- For designers
- Guidelines for spell checking
- Adding search
- For developers (XAML)
- TextBox class
- For developers (HTML)
- input type=text element | input type=text object
- textArea element