Checkbox

A multi-choice question rendered as checkboxes. Users can select one or more options from the list.

Schema Example

checkboxjson

{
  id: "interests",
  type: "checkbox",
  label: "Select your interests",
  required: true,
  options: [
    { label: "Technology", value: "tech" },
    { label: "Design", value: "design" },
    { label: "Marketing", value: "marketing" },
    { label: "Finance", value: "finance" }
  ]
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
options	{ label: string; value: string }[]	Array of choices. Each option needs a display label and a value.
required	boolean	Whether at least one checkbox must be selected.
defaultValue	string[]	Pre-selected option values.
description	string	Optional helper text displayed below the label.
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Custom validation rules for this question.

With Validation

Checkbox with min selectionsjson

{
  id: "skills",
  type: "checkbox",
  label: "Select at least 2 skills",
  required: true,
  options: [
    { label: "JavaScript", value: "js" },
    { label: "Python", value: "python" },
    { label: "Go", value: "go" },
    { label: "Rust", value: "rust" }
  ],
  validation: [
    { type: "minLength", value: 2, message: "Select at least 2 skills" }
  ]
}

Answer Format

Returns a string[] array containing the value of each selected option.

Practical Example

Advanced Example

A newsletter preferences form where users pick topics they're interested in:

NewsletterPrefs.tsxtsx

import { SurveyRenderer } from 'react-minimal-survey-builder';
import type { SurveySchema } from 'react-minimal-survey-builder';

const preferencesSchema: SurveySchema = {
  id: 'newsletter-prefs',
  title: 'Newsletter Preferences',
  description: 'Choose the topics you want to hear about.',
  pages: [
    {
      id: 'topics',
      questions: [
        {
          id: 'interests',
          type: 'checkbox',
          label: 'Topics of interest',
          required: true,
          description: 'Select at least 2 topics',
          options: [
            { label: 'Product Updates', value: 'product' },
            { label: 'Engineering Blog', value: 'engineering' },
            { label: 'Design Insights', value: 'design' },
            { label: 'Company News', value: 'company' },
            { label: 'Community Events', value: 'events' },
            { label: 'Tips & Tutorials', value: 'tutorials' },
          ],
          validation: [
            { type: 'minLength', value: 2, message: 'Please select at least 2 topics' },
          ],
        },
        {
          id: 'frequency',
          type: 'radio',
          label: 'How often?',
          required: true,
          options: [
            { label: 'Daily digest', value: 'daily' },
            { label: 'Weekly roundup', value: 'weekly' },
            { label: 'Monthly summary', value: 'monthly' },
          ],
        },
      ],
    },
  ],
  settings: { submitText: 'Save Preferences' },
};

function NewsletterPrefs() {
  return (
    <SurveyRenderer
      schema={preferencesSchema}
      options={{
        onSubmit: async (answers) => {
          // answers.interests is a string[] like ["product", "engineering"]
          console.log('Preferences saved:', answers);
        },
      }}
    />
  );
}