The TextInput question type provides a single-line text input field for users to enter short text responses.

​
Basic Usage

const nameQuestion = new TextInput({
    id: 'name',
    text: 'What is your name?',
    subText: 'Please enter your full name',
    minLength: 2,
    maxLength: 50,
    placeholder: 'Enter your name here'
});

​
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.

​
minLength
integer
default: "0"

Minimum required length of the response.

​
maxLength
integer
default: "255"

Maximum allowed length of the response.

​
placeholder
string
default: ""

Placeholder text for the input field.

​
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
  • errorMessage

​
Data

Response Format

The TextInput question type returns a string containing the user’s text input:

"John Doe"

Additional data stored includes:

  • responseLength: The length of the response.

Validation

The TextInput question validates that:

  1. The response is not empty when required is true.
  2. The response length is at least minLength (if specified).
  3. The response length does not exceed maxLength (if specified).
  4. Any custom validation provided in the customValidation function passes.

If validation fails, it displays an appropriate error message.

​
Methods

The TextInput 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 text response
textInputQuestion.setResponse('John Doe');
​
validate
function

Validate the current response against the question’s rules.

Returns:

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

​
Example

Here’s an example of how to create a customized text input question:

const emailQuestion = new TextInput({
    id: 'email',
    text: 'What is your email address?',
    subText: 'We will use this to contact you',
    minLength: 5,
    maxLength: 100,
    placeholder: 'example@domain.com',
    required: true,
    customValidation: (response) => {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(response)) {
            return 'Please enter a valid email address.';
        }
        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: {
            border: '2px solid #3498db',
            borderRadius: '4px',
            fontSize: '1.1em',
            padding: '10px',
            transition: 'border-color 0.3s ease',
            '&:focus': {
                borderColor: '#2980b9',
                outline: 'none'
            }
        },
        errorMessage: {
            color: '#e74c3c',
            fontWeight: 'bold',
            marginTop: '5px'
        }
    }
});
Single SelectLogic