All Question Types

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

const allTypesSchema: SurveySchema = {
  id: 'all-types-demo',
  title: 'All Question Types Demo',
  description: 'This survey demonstrates every built-in question type.',
  pages: [
    {
      id: 'text-inputs',
      title: 'Text Inputs',
      description: 'Text, textarea, number, and email fields.',
      questions: [
        {
          id: 'name',
          type: 'text',
          label: 'Full name',
          placeholder: 'Jane Doe',
          required: true,
          validation: [
            { type: 'minLength', value: 2, message: 'Name must be at least 2 characters' },
          ],
        },
        {
          id: 'email',
          type: 'email',
          label: 'Email address',
          placeholder: 'you@example.com',
          required: true,
          validation: [
            { type: 'email', message: 'Please enter a valid email' },
          ],
        },
        {
          id: 'age',
          type: 'number',
          label: 'Age',
          placeholder: 'Enter your age',
          validation: [
            { type: 'min', value: 1, message: 'Must be at least 1' },
            { type: 'max', value: 120, message: 'Must be at most 120' },
          ],
        },
        {
          id: 'bio',
          type: 'textarea',
          label: 'Tell us about yourself',
          placeholder: 'A short bio...',
          description: 'Max 500 characters',
          validation: [
            { type: 'maxLength', value: 500, message: 'Bio is too long' },
          ],
        },
      ],
    },
    {
      id: 'choices',
      title: 'Choice Questions',
      description: 'Radio, checkbox, and select fields.',
      questions: [
        {
          id: 'role',
          type: 'radio',
          label: 'What best describes your role?',
          required: true,
          options: [
            { label: 'Developer', value: 'developer' },
            { label: 'Designer', value: 'designer' },
            { label: 'Product Manager', value: 'pm' },
            { label: 'Student', value: 'student' },
            { label: 'Other', value: 'other' },
          ],
        },
        {
          id: 'other-role',
          type: 'text',
          label: 'Please specify your role',
          required: true,
          visibleIf: "{role} === 'other'",
        },
        {
          id: 'skills',
          type: 'checkbox',
          label: 'Technologies you use',
          description: 'Select all that apply',
          options: [
            { label: 'React', value: 'react' },
            { label: 'Vue', value: 'vue' },
            { label: 'Angular', value: 'angular' },
            { label: 'Svelte', value: 'svelte' },
            { label: 'Next.js', value: 'nextjs' },
          ],
        },
        {
          id: 'experience',
          type: 'select',
          label: 'Years of experience',
          placeholder: 'Select range',
          required: true,
          options: [
            { label: '< 1 year', value: 'junior' },
            { label: '1-3 years', value: 'mid' },
            { label: '3-5 years', value: 'senior' },
            { label: '5+ years', value: 'expert' },
          ],
        },
      ],
    },
    {
      id: 'date-rating',
      title: 'Date, Rating & Boolean',
      description: 'Date picker, star rating, and boolean (yes/no) fields.',
      questions: [
        {
          id: 'start-date',
          type: 'date',
          label: 'When did you start using our product?',
          required: true,
        },
        {
          id: 'overall-rating',
          type: 'rating',
          label: 'Overall experience',
          required: true,
          rateCount: 5,
        },
        {
          id: 'nps',
          type: 'rating',
          label: 'How likely are you to recommend us? (1-10)',
          rateCount: 10,
        },
        {
          id: 'newsletter',
          type: 'boolean',
          label: 'Would you like to receive our newsletter?',
        },
        {
          id: 'recommend',
          type: 'boolean',
          label: 'Would you recommend us to a friend?',
          required: true,
        },
        {
          id: 'feedback',
          type: 'textarea',
          label: 'Any final thoughts?',
          placeholder: 'We appreciate all feedback...',
        },
      ],
    },
    {
      id: 'contact-scheduling',
      title: 'Contact & Scheduling',
      description: 'Phone, time, datetime, and slider fields.',
      questions: [
        {
          id: 'phone',
          type: 'phone',
          label: 'Phone number',
          countryCode: '+1',
          placeholder: '(555) 123-4567',
          required: true,
          validation: [
            { type: 'phone', message: 'Please enter a valid phone number' },
          ],
        },
        {
          id: 'best-time',
          type: 'time',
          label: 'Best time to reach you',
          minTime: '09:00',
          maxTime: '18:00',
          description: 'Business hours only (9 AM – 6 PM)',
        },
        {
          id: 'followup-datetime',
          type: 'datetime',
          label: 'Schedule a follow-up call',
          minDatetime: '2026-01-01T09:00',
          description: 'Pick a date and time for a quick chat.',
        },
        {
          id: 'satisfaction-slider',
          type: 'slider',
          label: 'Overall satisfaction',
          sliderMin: 0,
          sliderMax: 100,
          sliderStep: 5,
          unit: '%',
          showValue: true,
          minLabel: 'Not satisfied',
          maxLabel: 'Very satisfied',
        },
        {
          id: 'effort-slider',
          type: 'slider',
          label: 'How easy was this survey?',
          sliderMin: 1,
          sliderMax: 10,
          showValue: true,
          minLabel: 'Very hard',
          maxLabel: 'Very easy',
        },
      ],
    },
  ],
  settings: {
    showProgress: true,
    allowBack: true,
    validateOnPageChange: true,
    submitText: 'Submit Survey',
    nextText: 'Next',
    prevText: 'Back',
  },
};