Number

A numeric input field for collecting integer or decimal values such as age, quantity, or scores.

Schema Example

numberjson

{
  id: "age",
  type: "number",
  label: "What is your age?",
  placeholder: "Enter your age",
  required: true
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
placeholder	string	Placeholder text shown inside the input.
required	boolean	Whether the field must be filled in.
defaultValue	number	Pre-filled default numeric value.
description	string	Optional helper text displayed below the label.
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Validation rules (min, max, required, custom, etc.).

With Validation

Number with min/max validationjson

{
  id: "age",
  type: "number",
  label: "Your age",
  required: true,
  validation: [
    { type: "min", value: 1, message: "Must be at least 1" },
    { type: "max", value: 120, message: "Must be at most 120" }
  ]
}

Answer Format

Returns a string value from the input. Use your own parsing if you need a numeric type.

Practical Example

Advanced Example

An order form that collects quantity with min/max constraints:

OrderForm.tsxtsx

import { SurveyRenderer } from 'react-minimal-survey-builder';
import type { SurveySchema } from 'react-minimal-survey-builder';

const orderSchema: SurveySchema = {
  id: 'order-form',
  title: 'Place Your Order',
  pages: [
    {
      id: 'order',
      questions: [
        {
          id: 'product',
          type: 'select',
          label: 'Product',
          required: true,
          options: [
            { label: 'Widget A', value: 'widget-a' },
            { label: 'Widget B', value: 'widget-b' },
          ],
        },
        {
          id: 'quantity',
          type: 'number',
          label: 'Quantity',
          placeholder: 'How many?',
          required: true,
          validation: [
            { type: 'min', value: 1, message: 'Minimum order is 1' },
            { type: 'max', value: 500, message: 'Maximum order is 500' },
          ],
        },
        {
          id: 'discount-code',
          type: 'text',
          label: 'Discount code',
          placeholder: 'Optional',
        },
      ],
    },
  ],
  settings: { submitText: 'Place Order' },
};

function OrderForm() {
  return (
    <SurveyRenderer
      schema={orderSchema}
      options={{
        onSubmit: async (answers) => {
          const qty = Number(answers.quantity);
          console.log('Order placed:', { ...answers, quantity: qty });
        },
      }}
    />
  );
}