Number

The number input type is used for numeric input fields. It provides a specialized input for numbers with built-in browser validation and supports various validation rules for numeric constraints.

Properties

Required Properties

• name (string): Unique identifier for the field
• type (string): Must be 'number'
• label (string): Display label for the field

Optional Properties

• placeholder (string): Hint text shown when field is empty
• disabled (boolean): Whether the field is disabled
• layout (string): Layout type (default, horizontal)
• rules (array): Validation rules for the field

Examples

Basic Number Field

{
  name: 'age',
  type: 'number',
  label: 'Age',
  placeholder: 'Enter your age',
  rules: ['required']
}

Age*

Price Field

{
  name: 'price',
  type: 'number',
  label: 'Price',
  placeholder: 'Enter price',
  rules: [
    'required',
    {
      type: 'custom',
      function: '(value) => value > 0',
      message: 'Price must be greater than 0'
    }
  ]
}

Price*

Quantity Field with Range Validation

{
  name: 'quantity',
  type: 'number',
  label: 'Quantity',
  placeholder: 'Enter quantity (1-100)',
  rules: [
    'required',
    {
      type: 'custom',
      function: '(value) => value >= 1 && value <= 100',
      message: 'Quantity must be between 1 and 100'
    }
  ]
}

Quantity*

Percentage Field

{
  name: 'discount',
  type: 'number',
  label: 'Discount Percentage',
  placeholder: 'Enter discount %',
  rules: [
    {
      type: 'custom',
      function: '(value) => value >= 0 && value <= 100',
      message: 'Discount must be between 0 and 100%'
    }
  ]
}

Discount Percentage

Rating Field

{
  name: 'rating',
  type: 'number',
  label: 'Rating',
  placeholder: 'Rate from 1 to 5',
  rules: [
    'required',
    {
      type: 'custom',
      function: '(value) => value >= 1 && value <= 5 && Number.isInteger(value)',
      message: 'Rating must be a whole number between 1 and 5'
    }
  ]
}

Rating*

Temperature Field

{
  name: 'temperature',
  type: 'number',
  label: 'Temperature (°C)',
  placeholder: 'Enter temperature',
  rules: [
    {
      type: 'custom',
      function: '(value) => value >= -273.15',
      message: 'Temperature cannot be below absolute zero'
    }
  ]
}

Temperature (°C)

Complex Form with Multiple Number Inputs

const schema = [
  {
    name: 'age',
    type: 'number',
    label: 'Age',
    placeholder: 'Enter your age',
    rules: [
      'required',
      {
        type: 'custom',
        function: '(value) => value >= 0 && value <= 120',
        message: 'Age must be between 0 and 120',
      },
    ],
  },
  {
    name: 'height',
    type: 'number',
    label: 'Height (cm)',
    placeholder: 'Enter height in cm',
    rules: [
      {
        type: 'custom',
        function: '(value) => value >= 50 && value <= 250',
        message: 'Height must be between 50 and 250 cm',
      },
    ],
  },
  {
    name: 'weight',
    type: 'number',
    label: 'Weight (kg)',
    placeholder: 'Enter weight in kg',
    rules: [
      {
        type: 'custom',
        function: '(value) => value >= 1 && value <= 500',
        message: 'Weight must be between 1 and 500 kg',
      },
    ],
  },
  {
    name: 'salary',
    type: 'number',
    label: 'Annual Salary',
    placeholder: 'Enter annual salary',
    rules: [
      'required',
      {
        type: 'custom',
        function: '(value) => value >= 0',
        message: 'Salary cannot be negative',
      },
    ],
  },
];

Age*

Height (cm)

Weight (kg)

Annual Salary*

Best Practices

1. Use appropriate placeholders that indicate the expected format or units
2. Set reasonable validation ranges for your specific use case
3. Consider decimal precision when dealing with currency or measurements
4. Use descriptive labels that include units when relevant
5. Validate for integer-only fields when whole numbers are required
6. Set minimum and maximum bounds to prevent unrealistic values
7. Consider negative values - allow them only when appropriate
8. Use custom validation for complex numeric constraints