Number field usage guidelines

Number inputs allow users to edit numeric values, and increment or decrement them using stepper buttons.

When to use

• When users need to be able to type in numbers.
• When users need to frequently adjust numeric values in small incremental steps.
• When user input needs to be editable.

When not to use

• For non-numeric user input, use text field or text area instead.
• For values that consist of numbers but aren’t incrementable numbers themselves, like credit card numbers or phone numbers, use text field or a more specialized component 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

Width

Code

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

export default function Demo() {
  return <NumberField label="Width" minValue={0} />;
}

Formatting and layout

Placement

Number 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 number field is long enough to accommodate the expected input.

Spacing

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

Form alignment

Number 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 number fields are stacked vertically with other elements (other number fields, or other form components), all of the components should have consistent widths.

Do

Age

Favorite fruit

Select an item

Don't

Age

Favorite fruit

Select an item

Content writing

Label

• Do provide a label to guide users on what to enter.
• Do use a short description of just one or two words for the label such as “Quantity”.
• Do not format labels in the form of a question such as “How many copies do you want to order?”
• Do not include verbs in your label such as “Enter quantity”.

Placeholder text

• Placeholder text can be used to provide an example of user input (“Enter quantity (1-99)”) but should not duplicate the label text. Placeholder text can be especially useful in number 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 number field.
• Do not provide unnecessary description text when the purpose of the number field is obvious.
• Do write clear and concise description text. Text should be limited to one sentence.
• End the description and error text with a period or equivalent punctuation mark. This helps screen reader users understand where the description and error text 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.