Text field usage guidelines

Text fields allow users to add in their own free-form values in forms.

When to use

• When users need to be able to type in short custom single-line free-form values.
• When the consequences of user mistakes in the input are not critical. For example, a typo in a naming a catalog is not going to block user progress, but a typo when inputting a specific attribute name may mean the attribute is incorrectly linked.
• When user input needs to be editable.

When not to use

• For longer and multi-line user input, use text area instead.
• Checkboxes, radio buttons, and single select should be used for data with pre-defined options or for data where user mistakes may cause critical issues.

Usage

Preview

Name

Code

import { TextField } from '@cimpress-ui/react';

export default function Demo() {
  return <TextField label="Name" placeholder="Enter your name" />;
}

Formatting and layout

Placement

Text fields can either be left-aligned with the container they are placed in or, for smaller containers like modal dialogs and disclosures, they can span the full width of the container. Take extra care to ensure the width of the text field is long enough to accommodate the expected input. If there is not enough space for the expected input, consider using a text area instead.

Spacing

• Text fields should have at least 16px of horizontal and vertical spacing between them and other elements.

Form alignment

Text fields can be used in forms in conjunction with the other form components (single select, check box, and radio button for example). Form element width should be determined by the width of the container, not the specific content in the individual element. When text fields are stacked vertically with other elements (other text fields, or other form components), all of the components should have consistent widths.

Do

Name

Favorite fruit

Select an item

Don't

Name

Favorite fruit

Select an item

Content writing

Label

• Do use a short description of just one or two words for the label such as “Product name”.
• Do not format labels in the form of a question such as “What name do you want to use?”
• Do not include verbs in your label such as “Add a product name”.

Placeholder text

• Placeholder text can be used to provide an example of user input but should not duplicate the label text. Placeholder text can be especially useful in text fields to help users understand the expected format for input values.
• Placeholder text is optional and should only be used where more context is necessary for the user to understand.

Description text

• Do provide description text whenever the label might not be enough context for a user to understand the purpose of the text field.
• Do not provide unnecessary description text when the purpose of the text field is obvious.
• Do write clear and concise description text. Text should be limited to one sentence.
• End the description text with a period or equivalent punctuation mark. This helps screen reader users understand where the description ends, and it improves readability for all users.

Error text

• Do provide clear and concise error messaging.
• Do explain the issue and let the user know what they need to do to resolve it. Error messages should always provide users with a solution or a path to resolving the error.
• Error messages should use language that is easily understood rather than complex technical terms.
• End the error message with a period or equivalent punctuation mark. This helps screen reader users understand where the error message ends, and it improves readability for all users.