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
{
id: "newsletter",
type: "boolean",
label: "Would you like to receive our newsletter?",
required: true
}Available Options
| Property | Type | Description |
|---|---|---|
| label | string | The question text displayed to the user. |
| required | boolean | When 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. |
| options | Option[2] | Optional. Customize the display labels only.
|
| defaultValue | boolean | Pre-selected value: true or false. |
| controlType | "radio" | "switch" | "checkbox" | Rendering style.
|
| 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. |
Custom Label Text
You can customize what "Yes" and "No" say — the answer value is always true / false:
{
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.
{
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.
{
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 ExampleA consent and preferences form combining radio and switch boolean questions:
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),
});
},
}}
/>
);
}