The Number component gives respondents a field for entering numeric values. It validates that entries are actually numbers and, on mobile, brings up a numeric keyboard for faster input.
When to use Number
Section titled “When to use Number”Number is ideal for collecting:
- Ages
- Quantities or counts
- Prices or budgets
- Years
- Scores or ratings
- Measurements
- Any numeric value
Adding a Number component
Section titled “Adding a Number component”-
Open your form in the editor
-
On the Build tab, open the Components panel and drag the Number component onto your form
-
Click the component on the canvas to select it and configure its settings
Configuration options
Section titled “Configuration options”Question label
Section titled “Question label”The main question or prompt displayed above the field.
Examples:
- “Age”
- “How many attendees?”
- “Budget (USD)”
- “Years of experience”
Description
Section titled “Description”Optional helper text that appears below the question label.
When to use descriptions:
- To specify units (years, dollars, etc.)
- To clarify what range is acceptable
- To provide context for the number
Examples:
- “Enter your age in years”
- “Approximate budget in US dollars”
- “Number of team members including yourself”
Placeholder
Section titled “Placeholder”Ghost text that appears inside the field when it’s empty.
Examples:
- “25”
- “Enter amount”
- “0”
Required
Section titled “Required”Toggle whether this field must be filled out before the form can be submitted.
When enabled:
- An asterisk (*) appears next to the question label
- Respondents cannot submit without providing a valid number
- A validation error appears if the field is left empty
Validation
Section titled “Validation”The Number field validates entries to ensure:
- The input is a valid number
- The field isn’t empty (if required)
Validation messages:
- “This field is required” - when empty and required
Mobile optimization
Section titled “Mobile optimization”The Number field is optimized for mobile devices:
- Triggers the numeric keyboard on mobile devices
- Shows number keys for faster entry
- Supports decimal input where appropriate
Decimal numbers
Section titled “Decimal numbers”The Number field accepts decimal values (e.g., 3.5, 10.99). If you only want whole numbers, mention this in your description.
Accessibility
Section titled “Accessibility”The Number field is built with accessibility in mind:
- Input type is set to “number” for proper semantics
- Labels are properly associated with the input
- Validation errors are announced to screen readers
- Keyboard navigation is fully supported