A text field is a rectangular area in which the user enters or edits one or more lines of text. A text field can contain plain or styled text.
There are several types of text field.
- A label is a text field that displays static text
- A search field is a text field that facilitates searching
- A token field is a text field that displays tokenized text
For developer guidance, see NSTextField.
Use an introductory label or placeholder text to help communicate purpose. A label helps the user understand what type of information they should enter. A text field can also contain placeholder text—such as Email or Password—when there’s no other text in the field. A label is often unnecessary when placeholder text is present. Generally, labels should use title-style capitalization and end with a colon, while placeholder text should use sentence-style capitalization and no punctuation. For related guidance, see Labels.
To the extent possible, match the size of a text field to the quantity of anticipated text. The size of a text field helps people gauge the amount of information to provide.
Evenly space multiple text fields. If your layout includes multiple text fields, leave enough space between them so users can easily see which input field belongs with each introductory label.
Generally, stack multiple text fields vertically. If you must position multiple labeled text fields horizontally, leave plenty of space between the end of one text field and the label of the next.
Use consistent text field widths to create a more organized layout. Using the same widths for multiple fields helps improve readability and provides a way to group related fields. For instance, the first and last name fields on an address form might be one width, while the address and city fields might be a different width.
Ensure that tabbing between multiple fields flows as expected. When tabbing between fields, focus should move in a logical sequence. The system attempts to achieve this result automatically, so customization is needed only in rare instances.
Use a combo box to pair text input with a list of choices. Don’t try to achieve the same effect by pairing a text field and a popup button. See Combo Boxes.