Radio

A single-choice question rendered as radio buttons. The user can select exactly one option from the list.

Schema Example

radiojson

{
  id: "experience",
  type: "radio",
  label: "How would you rate your experience?",
  required: true,
  options: [
    { label: "Excellent", value: "excellent" },
    { label: "Good", value: "good" },
    { label: "Average", value: "average" },
    { label: "Poor", value: "poor" }
  ]
}

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 a selection is required.
defaultValue	string	Pre-selected option value.
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 Conditional Logic

Radio with conditional visibilityjson

{
  id: "followup",
  type: "radio",
  label: "Would you recommend us?",
  visibleIf: "{experience} === 'excellent' || {experience} === 'good'",
  options: [
    { label: "Definitely", value: "yes" },
    { label: "Maybe", value: "maybe" },
    { label: "No", value: "no" }
  ]
}

Answer Format

Returns a string value matching the selected option's value field.

Practical Example

Advanced Example

A customer satisfaction survey with radio follow-ups based on the selected answer:

SatisfactionSurvey.tsxtsx

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

const satisfactionSchema: SurveySchema = {
  id: 'csat-survey',
  title: 'Customer Satisfaction',
  pages: [
    {
      id: 'feedback',
      questions: [
        {
          id: 'satisfaction',
          type: 'radio',
          label: 'How satisfied are you with our service?',
          required: true,
          options: [
            { label: 'Very satisfied', value: 'very-satisfied' },
            { label: 'Satisfied', value: 'satisfied' },
            { label: 'Neutral', value: 'neutral' },
            { label: 'Dissatisfied', value: 'dissatisfied' },
            { label: 'Very dissatisfied', value: 'very-dissatisfied' },
          ],
        },
        {
          id: 'what-went-wrong',
          type: 'textarea',
          label: 'What could we improve?',
          required: true,
          visibleIf: "{satisfaction} === 'dissatisfied' || {satisfaction} === 'very-dissatisfied'",
          placeholder: 'We appreciate your honest feedback...',
        },
        {
          id: 'recommend',
          type: 'radio',
          label: 'Would you recommend us to a friend?',
          visibleIf: "{satisfaction} === 'very-satisfied' || {satisfaction} === 'satisfied'",
          options: [
            { label: 'Definitely', value: 'yes' },
            { label: 'Probably', value: 'maybe' },
            { label: 'Not sure', value: 'no' },
          ],
        },
      ],
    },
  ],
};

function SatisfactionSurvey() {
  return (
    <SurveyRenderer
      schema={satisfactionSchema}
      options={{
        onSubmit: async (answers) => {
          await fetch('/api/csat', {
            method: 'POST',
            body: JSON.stringify(answers),
          });
        },
      }}
    />
  );
}