The CheckBox component provides a single checkbox for collecting binary (yes/no, true/false, agree/disagree) responses from users.

​
Basic Usage

const agreementCheckbox = new CheckBox({
    id: 'terms_agreement',
    text: 'I agree to the terms and conditions',
    required: true
});

​
Parameters

id
string
required

Unique identifier for the checkbox.

text
string
required

The label text for the checkbox.

required
boolean
default: "true"

Whether the checkbox must be checked.

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 checkbox. Available keys are:

  • root
  • innerContainer
  • checkboxFlexContainer
  • checkbox
  • checkboxLabel
  • errorMessage

​
Data

Response Format

The CheckBox component returns a boolean value:

true  // when checked
false // when unchecked

Validation

The CheckBox component validates that:

  1. The checkbox is checked when required is true.
  2. Any custom validation provided in the customValidation function passes.

If validation fails, it displays an error message.

​
Advanced

​
Methods

The CheckBox component inherits methods from the base Element class and includes some specific methods:

setResponse
function

Set the response for the checkbox.

Parameters:

  • value (boolean): The checked state of the checkbox
checkboxQuestion.setResponse(true);
validate
function

Validate the current response against the checkbox’s rules.

Returns:

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

​
Example

Here’s an example of how to create a more customized checkbox:

const newsletterSubscription = new CheckBox({
    id: 'newsletter_signup',
    text: 'Subscribe to our newsletter',
    required: false,
    customValidation: (response) => {
        // Custom validation logic here
        return true; // or return an error message string
    },
    styles: {
        root: { 
            backgroundColor: '#f0f8ff',
            padding: '15px',
            borderRadius: '8px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        },
        checkboxFlexContainer: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-start',
            gap: '10px',
        },
        checkboxLabel: { 
            color: '#2c3e50',
            fontSize: '1.2em',
            fontWeight: 'normal',
        },
        checkbox: {
            width: '20px',
            height: '20px',
            accentColor: '#3498db'
        },
        errorMessage: {
            color: '#e74c3c',
            fontWeight: 'bold',
            marginTop: '5px'
        }
    }
});

This example demonstrates how to use custom styling and validation to create a more tailored checkbox component.

Bounding BoxDropdown Select