Forms
Number Field
Numeric input with validation and formatting
Number Field
The number field accepts numeric values with optional validation for range, decimals, and step values.
When to use
- Quantities (order amounts, attendees)
- Ages
- Prices and amounts
- Ratings and scores
- Any numeric input
Settings
Label
Example: "Quantity", "Age", "Budget"
Placeholder
Example: "0", "Enter amount"
Description
Help text or format guidance.
Required
Make this field mandatory.
Default value
Pre-filled number.
Validation
Minimum value
Lowest allowed number.
| Setting | Example Use |
|---|---|
| 0 | Quantities (no negatives) |
| 1 | Required positive number |
| 18 | Age verification |
Maximum value
Highest allowed number.
| Setting | Example Use |
|---|---|
| 100 | Percentages |
| 999 | Limited quantities |
| 10000 | Budget caps |
Step
Increment value. Controls what numbers are valid.
| Step | Valid Values |
|---|---|
| 1 | Whole numbers only (default) |
| 0.01 | Currency (two decimals) |
| 0.5 | Half increments |
| 10 | Tens only (10, 20, 30...) |
Decimal places
Display format for the value:
| Setting | Display |
|---|---|
| 0 | 42 |
| 1 | 42.0 |
| 2 | 42.00 |
Display options
Prefix
Text or symbol before the input:
Prefix: $
Display: $ [____]Suffix
Text or symbol after the input:
Suffix: kg
Display: [____] kgSpinner controls
Show increment/decrement buttons:
[ - ] 5 [ + ]Useful for quantity selectors.
Examples
Quantity selector
Label: Quantity
Required: Yes
Min Value: 1
Max Value: 99
Step: 1
Default Value: 1
Spinner: YesPrice/Budget
Label: Budget
Placeholder: 0.00
Required: Yes
Min Value: 0
Step: 0.01
Prefix: $
Decimal Places: 2Age
Label: Age
Required: Yes
Min Value: 18
Max Value: 120
Step: 1
Description: You must be at least 18 years old.Rating (1-10)
Label: Rate your experience
Required: Yes
Min Value: 1
Max Value: 10
Step: 1
Spinner: Yes
Description: 1 = Poor, 10 = ExcellentPercentage
Label: Discount Percentage
Required: No
Min Value: 0
Max Value: 100
Step: 1
Suffix: %Mobile experience
Number fields show a numeric keyboard on mobile devices, making input faster and reducing errors.
Styling
<div class="fodo-field fodo-field-number">
<label class="fodo-label" for="field_abc123">
Quantity
<span class="fodo-required">*</span>
</label>
<div class="fodo-input-wrapper">
<span class="fodo-prefix">$</span>
<input
type="number"
id="field_abc123"
name="fields[abc123]"
class="fodo-input fodo-input-number"
min="0"
max="10000"
step="0.01"
required
>
</div>
</div>Hide spinner arrows
/* Chrome, Safari, Edge */
.fodo-input-number::-webkit-outer-spin-button,
.fodo-input-number::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
.fodo-input-number {
-moz-appearance: textfield;
}