Home > Tutorials > Designing User Interfaces > Text Fields

Text Fields

A text field is an interface component in which users are able to enter a single line of text. Text fields are related to text areas, which enable users to enter multiple lines of text, and editable combo boxes, which enable users to either enter a value or select one from a list.

Text fields usually have a border that distinguishes them from other textual interface components, such as labels.

Text fields may be editable or non-editable. It is important that non-editable text fields can be distinguished from both editable text fields and labels. Usually, editable text fields have a background color different from the background color of the window client area. This is generally used to indicate that a component can be modified. In contrast, non-editable text fields usually have the same background color as the window client area.

Both editable and non-editable text fields have a border which distinguishes them from labels. Labels usually do not have a border. If non-editable text fields do not have a border, then the background color should be different from the background color of labels. Ideally, the background color of non-editable text fields should be different from the background color of labels and of editable text fields. However, this means introducing an additional color into the user interface which might not always be desirable. It is, therefore, acceptable to use the background of editable text fields for non-editable text fields.

Editable text fields are traversable. It is debatable whether non-editable text fields should be traversable. Since non-editable text fields cannot be modified, there is no reason why they should receive keyboard focus. The only exception is if users need to select and copy the content of a non-editable text field and paste it into an editable text field. Since this is rare, we usually recommend that non-editable text fields are not traversable and that users are not able to select text in a non-editable text field using the mouse. However, not all user interface toolkits support this behavior. As an alternative, labels can be used to display non-editable text. In this case, non-editable text fields need to have a different background color than labels.

Both editable and non-editable text fields may by disabled.

There is much more to come on text fields in our next update.