Guidelines for text input
[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]
Text input boxes let the user enter and edit characters with a physical or on-screen keyboard. Enabling text wrapping allows an input box to accept multiple lines of text.
A standard text box is shown in four different states: single line typing text, text selection, disabled, multi-line entered text.
These questions will help answer if a standard text box, or another control, is the best fit for text input.
- Is it practical to efficiently enumerate all valid values? If so, consider using one of the selection controls, 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 only constrained 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 strictly numeric:
- Is the value being entered 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 with an accompanying control.
- Is the value entered likely to be adjusted after the result is observed, such as with volume or screen brightness? If so, use a slider.
- Use a label or placeholder text if the purpose of the text box isn't clear. 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.
- Give the text box an appropriate width for the range of values that can be entered. Word length varies between languages, so take localization into account if you want your app to be world-ready.
- 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, a text input box is used 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, and 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, group those together.
- Make the size of 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 for characters that can be entered. 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 populate the text control, as text boxes clear placeholder text when the control is used. Instead, use the "value" attribute.
- 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, and 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.
- Use a font that's consistent with the style of your app.
- Make the height of the text control tall enough to accommodate typical entries.
When capturing long spans of text with a maximum character or word count, 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'll need to create the counter yourself; place it below the text box and dynamically update it as the user enters each character or word. To get started with a character counter, read about the string length property, which gets the number of characters in the current string object.
- 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 a plain text control is adequate.
Use a text input box to let the user enter a text value, or to edit a value already entered. You can limit the number of characters that can be entered, and you can choose from a list of input scopes, which limits 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 to users, use a plain text input control.
- 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
- For developers (other)
- String.Length property