The NumberEntry question type provides a numeric input field for users to enter a numeric value.

​
Basic Usage

const ageQuestion = new NumberEntry({
    id: 'age',
    text: 'What is your age?',
    min: 18,
    max: 120,
    required: true
});

​
Parameters

id
string
required

Unique identifier for the question.

text
string
required

The main question text.

subText
string
default: ""

Additional text to provide context or instructions.

min
number

The minimum allowed value. If null, no minimum is enforced.

max
number

The maximum allowed value. If null, no maximum is enforced.

step
number
default: "1"

The increment value for the input.

unit
string
default: ""

The unit of measurement to display next to the input.

required
boolean
default: "true"

Whether the question is required.

customValidation
function

A custom validation function that takes the response as input and returns true if valid, or an error message string if invalid.

styles
object

Custom styles to apply to the question. Available keys are:

  • root
  • innerContainer
  • textContainer
  • text
  • subText
  • input
  • unit
  • errorMessage

​
Data

Response Format

The NumberEntry question type returns a string representing the entered numeric value:

"25"

The numeric value is also stored separately in the numericValue data field:

this.data.numericValue = 25

Validation

The NumberEntry question validates that:

  1. A value is entered when required is true.
  2. The entered value is a valid number.
  3. The value is within the specified min and max range (if set).
  4. Any custom validation provided in the customValidation function passes.

If validation fails, it displays an appropriate error message.

​
Advanced

​
Methods

The NumberEntry question type inherits methods from the base Element class and includes some specific methods:

setResponse
function

Set the response for the question.

Parameters:

  • value (string): The numeric value as a string
numberEntryQuestion.setResponse('25');
validate
function

Validate the current response against the question’s rules.

Returns:

  • An object with isValid (boolean) and errorMessage (string) properties.
const { isValid, errorMessage } = numberEntryQuestion.validate();

​
Example

Here’s an example of how to create a customized number entry question:

const temperatureQuestion = new NumberEntry({
    id: 'room_temperature',
    text: 'What is your preferred room temperature?',
    subText: 'Enter a value between 60 and 80 degrees',
    min: 60,
    max: 80,
    step: 0.5,
    unit: '°F',
    required: true,
    customValidation: (response) => {
        const value = parseFloat(response);
        if (value % 1 !== 0.5 && value % 1 !== 0) {
            return 'Please enter a whole number or half degree (e.g., 72 or 72.5)';
        }
        return true;
    },
    styles: {
        root: { 
            backgroundColor: '#f0f8ff',
            padding: '15px',
            borderRadius: '8px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        },
        text: { 
            color: '#2c3e50',
            fontSize: '1.2em',
            fontWeight: 'bold'
        },
        subText: {
            fontStyle: 'italic',
            color: '#7f8c8d'
        },
        input: {
            width: '100px',
            border: '2px solid #3498db',
            borderRadius: '4px',
            fontSize: '1.1em',
            padding: '5px'
        },
        unit: {
            marginLeft: '10px',
            color: '#34495e',
            fontSize: '1em'
        },
        errorMessage: {
            color: '#e74c3c',
            fontWeight: 'bold',
            marginTop: '5px'
        }
    }
});
Multiple SelectNumber Scale