Number Block - Flex Forms

The Number block (integer in the schema, labeled Number in Studio) is for mathematical and quantitative data. Prefer it over Text input when you need numeric keyboards, min/max bounds, and clean analytics. For stepping UI, use Number stepper. For money, use Currency.

Business Use Cases

Age Gates

Ask for a user’s age and strictly enforce a minimum limit (e.g., must be > 18).

Financial Inputs

Collect salary expectations or donation amounts using float (decimal) steps.

Inventory Quantities

Use the built-in stepper buttons (+ and -) to let users quickly adjust order quantities.

Configuration & Usage

Deploy to Canvas

Drag the Number block from the Component Catalog onto the Canvas.

Configure Boundaries

Define the Minimum and Maximum values. For example, if you are asking for “Age”, set the minimum to 18 to legally restrict submissions.

Allow decimals (optional)

By default Number accepts whole numbers only. Enable Allow decimals when you need fractional values (e.g. weight). Adjust Step if you use a stepper UI.

Technical Configuration Schemas

Visuals & UI
Mathematical Boundaries

string

default:"md"

The visual size of the number stepper field. Available options are sm, md, and lg.

string

Customizes the heroicon used for the + (increment) button on the stepper.

string

Customizes the heroicon used for the - (decrement) button on the stepper.

integer | float

The absolute minimum numeric value the user is allowed to enter (e.g., 18).

integer | float

The maximum numeric value the user is allowed to enter (e.g., 100).

integer | float

default:"1"

The incremental step for the stepper buttons.

A step of 1 enforces integers.
A step of 0.01 or 0.5 allows floats/decimals.

Data Payload Architecture

The Number block guarantees that the data saved is a true programmatic number type, not a string masquerading as a number. This is crucial for APIs that expect strict types.

{
  "submission_id": "sub_777",
  "data": {
    "user_age": 28,
    "donation_amount": 150.50
  }
}

[
    'user_age' => 28,           // Saved as integer
    'donation_amount' => 150.50 // Saved as float
]

Deep Dive: When NOT to use the Number Block

It is a common mistake to use the Number block for things that look like numbers but are actually identifiers. Do NOT use the Number block for:

Phone Numbers
Zip / Postal Codes
Credit Card Numbers
Social Security Numbers

The Rule of Thumb: If you would never add, subtract, or multiply the data, it is not a Number. Use a Short Text Block with a Custom Mask instead!

Best Practices & FAQs

Decimals vs Integers

By default the Number block accepts whole numbers only. Turn on Allow decimals in the block settings when you need fractional values (e.g. weight 12.5). For money amounts, prefer the Currency block instead.

Removing Stepper Buttons

If you don’t want the + and - buttons appearing inside the input (e.g., for collecting Salary), simply leave the increment_icon and decrement_icon blank, and standard browsers will hide them.

Number stepper — + / - control for quantities
Currency — money amounts with ISO currency
Slider — single-value track
Flex slider — pill rail, optional two-handle range
Price range · Traffic split

​Business Use Cases

Age Gates

Financial Inputs

Inventory Quantities

​Configuration & Usage

​Technical Configuration Schemas

​Data Payload Architecture

​Deep Dive: When NOT to use the Number Block

​Best Practices & FAQs

​Related numeric blocks

Business Use Cases

Configuration & Usage

Technical Configuration Schemas

Data Payload Architecture

Deep Dive: When NOT to use the Number Block

Best Practices & FAQs

Related numeric blocks