The MultiSelect question type presents users with a list of options from which they can select multiple answers.

​
Basic Usage

const foodPreferencesQuestion = new MultiSelect({
    id: 'food_preferences',
    text: 'Which of the following foods do you enjoy?',
    options: ['Pizza', 'Sushi', 'Tacos', 'Salad', 'Burgers'],
    minSelected: 1,
    maxSelected: 3,
    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.

options
array
required

An array of strings representing the available options.

required
boolean
default: "true"

Whether the question is required.

randomize
boolean
default: "false"

Whether to randomize the order of options.

minSelected
integer
default: "0"

The minimum number of options that must be selected.

maxSelected
integer

The maximum number of options that can be selected. If null, there is no maximum.

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
  • optionsContainer
  • option
  • checkbox
  • label
  • errorMessage

​
Data

Response Format

The MultiSelect question type returns an array of strings representing the selected options:

["Pizza", "Sushi", "Burgers"]

Validation

The MultiSelect question validates that:

  1. At least one option is selected when required is true.
  2. The number of selected options is at least minSelected (if specified).
  3. The number of selected options does not exceed maxSelected (if specified).
  4. Any custom validation provided in the customValidation function passes.

If validation fails, it displays an error message.

​
Advanced

​
Methods

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

setResponse
function

Set the response for the question.

Parameters:

  • value (array): An array of selected option strings
multiSelectQuestion.setResponse(['Pizza', 'Sushi']);
validate
function

Validate the current response against the question’s rules.

Returns:

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

Update the response based on the current state of the checkboxes.

This method is typically called internally when the user interacts with the question.

multiSelectQuestion.updateResponse();

​
Example

Here’s an example of how to create a customized multi-select question:

const customizedQuestion = new MultiSelect({
    id: 'travel_interests',
    text: 'What types of travel experiences interest you?',
    subText: 'Select all that apply',
    options: ['Beach Vacation', 'City Exploration', 'Mountain Hiking', 'Cultural Tours', 'Adventure Sports'],
    randomize: true,
    minSelected: 2,
    maxSelected: 4,
    required: true,
    customValidation: (response) => {
        if (!response.includes('Beach Vacation') && !response.includes('Mountain Hiking')) {
            return 'Please select at least one nature-related option.';
        }
        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'
        },
        optionsContainer: {
            marginTop: '10px'
        },
        option: {
            marginBottom: '10px',
            '&:hover': {
                backgroundColor: '#e0e0e0'
            }
        },
        checkbox: {
            accentColor: '#3498db'
        },
        label: {
            marginLeft: '10px'
        },
        errorMessage: {
            color: '#e74c3c',
            fontWeight: 'bold',
            marginTop: '5px'
        }
    }
});
HTMLNumber Entry