NumberInputV2

Use NumberInputV2 to let users enter integers and floating-point numbers.

OverviewPropertiesUsage

When to use

• Users need to provide a numeric value.
• Users need to see a numeric value and adjust it relative to its current state.
• You need built-in validation for minimum, maximum, or step constraints for a numeric value.
• Regional formats for units of measurement or currency are needed. For example, "$", "kg", "%", in the prefix or suffix slot, separated by periods or commas, and other regionally-specific styles.

When not to use

• Users must select from a predefined set of numbers. Use Select or Radio instead.
• The number is part of a formatted string, as with phone numbers, credit cards, or currency with symbols. Use a TextInput with the appropriate formatting and validation.

Content guidelines

Label (recommended)

Add a label that describes the purpose or context of the number to be entered. It should be descriptive but short (1-2 words).

• Do: Buckets
• Do: Threshold
• Don't: Number input
• Don't: Number of buckets

Placeholder (required)

Default placeholder text: Add number

The default placeholder text works for most use cases, but if you customize the placeholder, do the following:

• Use the formula Add + [subject] or [Verb] + [subject].
• “Add” is the default verb for our placeholders. Don't replace it with alternatives such as “Enter,” “Fill,” or “Type,” unless there's a good reason to do so.
• Omit unnecessary articles (a, an, the).
• Don't add periods, ellipses, or exclamation marks.

Examples:

• Add maximum
• Add account number

Use hint for essential information

Don't use the placeholder for information users need to complete the task, as placeholders disappear when users start typing.

Hint (optional)

Use the hint for additional information that helps users add a valid number and avoid an error. Always provide error messages related to the input in the hint.

Example:

• Number must be between 1 and 99.