Skip to main content
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'
        }
    }
});