Number Field
Collect numbers with precision and style. From simple numeric inputs to interactive sliders with currency formatting - the Number field provides validation, formatting, and a beautiful user experience.
Smart Number Collection with Built-In Validation
Perfect for:
Powerful Features for Every Use Case
🎯 Precise Validation Control
Min/Max Boundaries
Set the lowest and highest allowed values. Prevent invalid entries before submission with built-in browser validation.
Step Size Control
Define increment values – whole numbers (1), half steps (0.5), or precise decimals (0.01) for currency.
Examples:
- Age field: Min 18, Max 100, Step 1
- Price field: Min 0, Max 10000, Step 0.01
- Rating: Min 1, Max 5, Step 0.5
💰 Smart Number Formatting
Multiple Format Options:
- Plain Number – Simple numeric input (123)
- Currency – Money with symbols ($123.00, €123.00, £123.00)
- Percentage – Auto-append % symbol (85%)
- Decimal – Fixed decimal places (123.45)
Custom Currency Symbols
Support any currency: $, €, £, ¥, ₹, and more – perfect for international forms.
Decimal Precision
Control decimal places from 0 to 4 digits for exact calculations.
Interactive Slider Mode
Visual Number Selection
Transform number inputs into beautiful sliders. Users slide to select values – perfect for ratings, ranges, and preferences.
Customizable Appearance
- Choose slider color to match your brand
- Show/hide current value display
- Smooth animations and transitions
Ideal For:
- Satisfaction ratings (1-10)
- Budget ranges ($0-$5000)
- Age selectors
- Priority levels
- Any range selection
🔀 Conditional Logic
Smart Field Visibility
Show or hide this number field based on other field values. Create dynamic forms that adapt to user input.
Advanced Logic Rules:
- AND Logic – All conditions must be met
- OR Logic – Any condition can trigger the action
- 8 Operators – Equals, Not equals, Greater than, Less than, Contains, Is empty, and more
Use Cases:
- Show “Number of guests” only when “Bring guests?” checkbox is checked
- Display “Budget range” when service type equals “Premium”
- Hide “Discount code” when order total is less than $50
- Reveal age-restricted options when age is greater than 1
🎨 Full Customization
- Custom CSS classes
- Hidden field mode
- Mobile-optimized inputs
- Accessibility support
- Integration with all form features
- Step Size, Starting Value
- Lowest/Highest Allowed Value
- Hidden Field, Hidden Value
⚙️ Smart Configuration
Default Values
Pre-fill fields with starting numbers to guide users or speed up completion.
Placeholder Text
Show helpful hints like “Enter quantity” or “Your age” before users type.
Help Text
Add descriptions to clarify what numbers to enter.
Simple Setup in 3 Steps
Get your Dropdown Field ready in minutes
Add the Number Field
Drag and drop the Number field from the Basic Fields section into your form.
Set Validation Rules
Configure min/max values, step size, and starting value to control what numbers users can enter.
Choose Format & Style
Select plain, currency, percentage, or decimal format. Optionally enable slider mode for visual selection.
🎉 That's it! Your number field is ready with smart validation and formatting.
Real-World Applications
E-Commerce & Orders
- Product quantity selectors
- Price range filters
- Discount percentage inputs
- Item counts and totals
Surveys & Ratings
- Satisfaction scores (1-10)
- Star ratings
- Priority rankings
- Likelihood scales
Fitness & Health
- Weight tracking
- Height measurements
- Exercise repetitions
- BMI calculators
Bookings & Reservations
- Number of guests/attendees
- Room quantity
- Duration in hours/days
- Party size
Application Forms
- Age verification
- Years of experience
- Salary expectations
- Budget ranges
Business & Finance
- Revenue inputs
- Investment amounts
- ROI percentages
- Commission rates
Complete Field Options
Basic Configuration
- Field Label – The title shown above the number field
- Description/Help Text – Additional guidance for users
- Required Field – Make number entry mandatory
- Placeholder Text – Hint text before users enter a number
Validation Settings
- Lowest Allowed Value (Min) – Smallest acceptable number
- Highest Allowed Value (Max) – Largest acceptable number
- Step Size – Increment value (1, 0.5, 0.01, etc.)
- Starting Value – Pre-filled default number
Number Formatting
- Display Format
- Plain Number
- Currency (with symbol)
- Percentage (%)
- Decimal (fixed places)
Currency Symbol – $, €, £, ¥, ₹ (when format is Currency)
Decimal Places – 0, 1, 2, 3, or 4 digits (when format is Decimal)
Slider Options
- Show as Slider – Enable interactive slider mode
- Slider Color – Custom color picker for branding
- Show Number Next to Slider – Display current value
Conditional Logic
- Enable Conditional Logic – Show/hide based on conditions
Logic Type- All conditions must be met (AND)
- Any condition can be met (OR)
- Condition Rules
- Show/Hide – Action to take
- Field – Which field to check
- Operator – Equals, Not equals, Contains, Greater than, Less than, Is empty, Is not empty
- Value – Comparison value
- Multiple Conditions – Add unlimited rules
Advanced Options
- Hidden Field Mode – Use as hidden field with pre-set value
- Custom CSS Classes – Apply custom styling
- Accessibility Attributes – ARIA labels and descriptions
Why Choose Our Number Field?
✅ Precise – Exact min/max validation prevents invalid entries
✅ Flexible – Multiple formats for any use case
✅ Visual – Slider mode creates engaging interactions
✅ Smart – Conditional logic creates dynamic forms
✅ User-Friendly – Clear validation messages guide users
✅ Professional – Currency and percentage formatting built-in
✅ Mobile Optimized – Perfect number keyboards on mobile devices
✅ Fully Integrated – Works seamlessly with all form features
Frequently Asked Questions
Q: What’s the difference between Min/Max and validation?
A: Min/Max settings provide instant browser-level validation. Users can’t submit invalid numbers, making forms error-free and user-friendly.
Q: Can I use decimal numbers?
A: Yes! Set the Step value to control decimals. Use 0.01 for currency (prices), 0.1 for one decimal place, or any custom step.
Q: How does the slider work on mobile?
A: Sliders are touch-optimized and work smoothly on mobile devices.
Q: Can I collect negative numbers?
A: Absolutely! Set a negative Min value (e.g., Min: -100, Max: 100) to allow negative numbers.
Q: What currency symbols are supported?
A: Any symbol! Enter $, €, £, ¥, ₹, or any custom symbol up to 3 characters.
Q: Can I use conditional logic based on number comparisons?
A: Yes! Use operators like “Greater than”, “Less than”, and “Equals” to create logic based on numeric values.
Q: How do I create a percentage field?
A: Select “Percentage (%)” as the Display Format. The % symbol appears automatically, and users enter values from 0–100.
Q: Can I change the slider color?
A: Yes! When slider mode is enabled, you can choose any color using the color picker.
Q: What happens if users enter numbers outside the range?
A: Browser validation stops submission and shows an error message such as “Value must be between 1 and 100.”
Q: Can I use the number field for calculations?
A: Yes! Number field values work in conditional comparisons and in calculations in your form processing.
Q: How precise can decimal numbers be?
A: You can set decimal places from 0 to 4 digits, and step values can be as precise as needed (e.g., 0.001).
