S
Documentation

Boolean

A Yes/No question that always returns a boolean value. Renders as radio buttons by default. Use controlType to switch to a toggle switch or a single checkbox. Display labels are customizable via options.

Schema Example

booleanjson
{
  id: "newsletter",
  type: "boolean",
  label: "Would you like to receive our newsletter?",
  required: true
}

Available Options

PropertyTypeDescription
labelstringThe question text displayed to the user.
requiredbooleanWhen true, the value must be exactly true to pass validation. Selecting false (or leaving unchecked) will trigger a validation error — useful for consent checkboxes, ToS agreements, etc.
optionsOption[2]Optional. Customize the display labels only.
  • The first option's label replaces "Yes"
  • the second replaces "No".
  • The answer value is always true / false regardless of the label.
defaultValuebooleanPre-selected value: true or false.
controlType"radio" | "switch" | "checkbox"Rendering style.
  • Defaults to "radio" (two radio buttons).
  • "switch" renders a toggle with false label left / true label right.
  • "checkbox" renders a single checkbox — the question label is used as the inline checkbox label. options are not required for this variant.
descriptionstringOptional helper text displayed below the label.
visibleIfstringConditional expression to show/hide this question.
validationValidationRule[]Custom validation rules for this question.

Custom Label Text

You can customize what "Yes" and "No" say — the answer value is always true / false:

Custom labelsjson
{
  id: "terms",
  type: "boolean",
  label: "Do you agree to the Terms of Service?",
  required: true,
  options: [
    { label: "I Agree" },
    { label: "I Decline" }
  ]
}

Switch Control

Set controlType: "switch" to render a toggle switch instead of radio buttons. The false label appears on the left, the true label on the right. Active side is highlighted bold.

Switch variantjson
{
  id: "notifications",
  type: "boolean",
  controlType: "switch",
  label: "Enable push notifications?",
  defaultValue: true
}

// With custom labels
{
  id: "dark-mode",
  type: "boolean",
  controlType: "switch",
  label: "Color theme",
  options: [
    { label: "Dark" },
    { label: "Light" }
  ],
  defaultValue: false
}

Checkbox Control

Set controlType: "checkbox" for a single checkbox. The question label is rendered as the inline text beside the box. No options needed. Checked = true, unchecked = false.

Checkbox variantjson
{
  id: "tos",
  type: "boolean",
  controlType: "checkbox",
  label: "I agree to the Terms of Service and Privacy Policy",
  required: true
}

// With a description for extra context
{
  id: "over-18",
  type: "boolean",
  controlType: "checkbox",
  label: "I confirm I am 18 years of age or older",
  description: "Required to use this service",
  required: true
}

Answer Format

Always returns a boolean. For radio / switch: true = first option selected, false = second. For checkbox: true = checked, false / undefined = unchecked. When controlType: "checkbox" and required: true, validation enforces the value must be exactly true — leaving it unchecked will fail.

Practical Example

Advanced Example

A consent and preferences form combining radio and switch boolean questions:

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

const consentSchema: SurveySchema = {
  id: 'consent-form',
  title: 'Consent & Preferences',
  pages: [
    {
      id: 'consent',
      questions: [
        // Radio (default) — two explicit options
        {
          id: 'terms',
          type: 'boolean',
          label: 'Do you agree to the Terms of Service?',
          required: true,
          options: [
            { label: 'I Agree' },
            { label: 'I Decline' },
          ],
        },
        // Switch — label on each side, pre-enabled
        {
          id: 'newsletter',
          type: 'boolean',
          controlType: 'switch',
          label: 'Newsletter subscription',
          defaultValue: true,
        },
        // Switch — custom side labels
        {
          id: 'analytics',
          type: 'boolean',
          controlType: 'switch',
          label: 'Usage analytics',
          description: 'Helps us improve the product.',
          options: [
            { label: 'Enabled' },
            { label: 'Disabled' },
          ],
        },
        // Checkbox — label is the inline checkbox text
        {
          id: 'tos',
          type: 'boolean',
          controlType: 'checkbox',
          label: 'I agree to the Terms of Service and Privacy Policy',
          required: true,
        },
        // Conditionally visible based on a boolean answer
        {
          id: 'feedback-opt-in',
          type: 'boolean',
          controlType: 'switch',
          label: 'Can we contact you for feedback?',
          visibleIf: '{newsletter} === true',
        },
      ],
    },
  ],
  settings: { submitText: 'Save Preferences' },
};

function ConsentForm() {
  return (
    <SurveyRenderer
      schema={consentSchema}
      options={{
        onSubmit: async (answers) => {
          // answers.terms → true, answers.newsletter → true
          await fetch('/api/preferences', {
            method: 'POST',
            body: JSON.stringify(answers),
          });
        },
      }}
    />
  );
}