Text Fields

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.

Partial screenshot of the Contacts app, highlighted to show the person's mobile phone number in a text field.

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.

Data Entry

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.

Labeled text

Placeholder text

Perform field validation. Let the user know if they’ve entered an invalid value. If the only legitimate value for a field is a string of digits, for example, your app should alert the user if they’ve entered characters other than digits. In most cases, the best time to check the data is when the user clicks outside the field or presses the Return, Enter, or Tab key.

Use a number formatter to aid with numeric data entry. A number formatter automatically configures the text field to accept only numeric values. It can also be set to display the value in a specific way, such as with a certain number of decimal places, as a percentage, or as currency. Don't assume the actual presentation of data, however, as formatting can vary significantly based on the user's locale.

Formatted text

Adjust line breaks accordingly. By default, any text extending beyond the bounds of a text field is clipped. A text field, however, can be set to wrap text to a new line at the character or word level, or to be truncated (indicated by an ellipsis) at the beginning, middle, or end.

Clipped text

Wrapped text

Truncated text

Use secure text fields when asking for sensitive data, like a password. A secure text field obscures the entered text by replacing it with bullets.

Let the user adjust text attributes if it makes sense. If your text field contains styled text, it may add value if the user can adjust the font, size, and color of the text.

Secure text

Styled text

Consider using an expansion tooltip to show the full version of clipped or truncated text. An expansion tooltip behaves like a help tag and appears when the user places the pointer over the field.

For related guidance, see Data Entry.

Layout Considerations

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.