Basic Survey

A simple single-page feedback form with text, email, and radio questions.

Schema

schema.tstsx

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

const schema: SurveySchema = {
  id: 'basic-feedback',
  title: 'Quick Feedback',
  description: 'Tell us what you think!',
  pages: [
    {
      id: 'page1',
      questions: [
        {
          id: 'name',
          type: 'text',
          label: 'Your name',
          required: true,
          placeholder: 'Enter your name',
        },
        {
          id: 'email',
          type: 'email',
          label: 'Email address',
          required: true,
          validation: [
            { type: 'email', message: 'Please enter a valid email' },
          ],
        },
        {
          id: 'rating',
          type: 'rating',
          label: 'How would you rate our service?',
          required: true,
        },
        {
          id: 'recommend',
          type: 'radio',
          label: 'Would you recommend us?',
          options: [
            { label: 'Yes', value: 'yes' },
            { label: 'Maybe', value: 'maybe' },
            { label: 'No', value: 'no' },
          ],
        },
        {
          id: 'comments',
          type: 'textarea',
          label: 'Additional comments',
          placeholder: 'Anything else you want to share...',
        },
      ],
    },
  ],
  settings: {
    submitText: 'Send Feedback',
  },
};

Using SurveyRenderer

SurveyRenderer approachtsx

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

function FeedbackPage() {
  return (
    <SurveyRenderer
      schema={schema}
      options={{
        onSubmit: async (answers) => {
          console.log('Submitted:', answers);
          // await fetch('/api/feedback', { method: 'POST', body: JSON.stringify(answers) });
        },
      }}
    />
  );
}

export default FeedbackPage;

Using useSurvey Hook

useSurvey approachtsx

import { useSurvey } from 'react-minimal-survey-builder';

function FeedbackForm() {
  const {
    answers, setAnswer,
    getVisibleQuestions, getError,
    submit, isSubmitted,
  } = useSurvey(schema, {
    onSubmit: (answers) => {
      console.log('Submitted:', answers);
    },
  });

  if (isSubmitted) {
    return <p>Thank you for your feedback!</p>;
  }

  return (
    <form onSubmit={(e) => { e.preventDefault(); submit(); }}>
      <h1>{schema.title}</h1>
      <p>{schema.description}</p>

      {getVisibleQuestions().map((q) => (
        <div key={q.id} style={{ marginBottom: 16 }}>
          <label>
            {q.label}
            {q.required && <span style={{ color: 'red' }}> *</span>}
          </label>

          {q.type === 'text' || q.type === 'email' ? (
            <input
              type={q.type}
              value={(answers[q.id] as string) ?? ''}
              onChange={(e) => setAnswer(q.id, e.target.value)}
              placeholder={q.placeholder}
            />
          ) : q.type === 'textarea' ? (
            <textarea
              value={(answers[q.id] as string) ?? ''}
              onChange={(e) => setAnswer(q.id, e.target.value)}
              placeholder={q.placeholder}
            />
          ) : q.type === 'radio' ? (
            <div>
              {q.options?.map((opt) => (
                <label key={opt.value} style={{ display: 'block' }}>
                  <input
                    type="radio"
                    name={q.id}
                    value={opt.value}
                    checked={answers[q.id] === opt.value}
                    onChange={() => setAnswer(q.id, opt.value)}
                  />
                  {opt.label}
                </label>
              ))}
            </div>
          ) : null}

          {getError(q.id) && (
            <p style={{ color: 'red', fontSize: 12 }}>{getError(q.id)}</p>
          )}
        </div>
      ))}

      <button type="submit">Send Feedback</button>
    </form>
  );
}