What You'll Build

A form demonstrating different number field types: integer fields for whole numbers, decimal fields for precise measurements, and money fields with currency formatting.

What You'll Learn

Difference between integer, decimal, and money field types
Setting minimum and maximum values for validation
Using step values for precise increments
Currency formatting with money fields

⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our number fields form step by step.

Step 2: Integer Field

First, let's add an integer field for age. Integer fields only accept whole numbers and are perfect for counts, ages, quantities, etc.

💡 Tip:

Integer fields use addInteger() and only accept whole numbers. The min and max properties provide validation boundaries.

Step 3: Decimal Field

Now let's add a decimal field for height. Decimal fields accept fractional numbers and are great for measurements, percentages, and precise calculations.

💡 Tip:

Decimal fields use addDecimal() and accept fractional numbers. The step property controls the increment size (0.01 for centimeters).

Step 4: Money Field

Let's add a money field for salary. Money fields provide automatic currency formatting and are perfect for financial data.

💡 Tip:

Money fields use addMoney() and automatically format values with currency symbols. The currency property sets the symbol (defaults to 'USD').

Step 5: Advanced Money Field

Finally, let's add another money field with different currency and step values. Notice how different currencies and step sizes affect the input behavior.

💡 Tip:

You can use different currencies like '€', '£', '¥', or any symbol. The step property can be fractional for precise pricing (0.01 for cents).

Try It Yourself

Challenge 1: Change the currency symbol to '£' and adjust the step to 0.50
Challenge 2: Add a new integer field for "Number of Items" with min: 1, max: 100
Challenge 3: Create a decimal field for "Temperature" with min: -50, max: 50, step: 0.1

Next Steps

Excellent! You've mastered number fields and their different types. Ready to explore more advanced form features?

Continue to Selection Fields Tutorial

Other learning paths:

Learn about radio buttons and dropdowns
Master form layout with column widths
Add validation and conditional logic