Select

A dropdown select field. Ideal for long lists of options where radio buttons would take up too much space.

Schema Example

selectjson

{
  id: "country",
  type: "select",
  label: "Select your country",
  placeholder: "Choose a country…",
  required: true,
  options: [
    { label: "United States", value: "us" },
    { label: "United Kingdom", value: "uk" },
    { label: "Canada", value: "ca" },
    { label: "Australia", value: "au" },
    { label: "Germany", value: "de" }
  ]
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
options	{ label: string; value: string }[]	Array of choices for the dropdown.
placeholder	string	Placeholder text shown when no option is selected.
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.

Answer Format

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

Practical Example

Advanced Example

A user profile form with country and timezone dropdowns:

ProfileForm.tsxtsx

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

const profileSchema: SurveySchema = {
  id: 'user-profile',
  title: 'Complete Your Profile',
  pages: [
    {
      id: 'location',
      questions: [
        {
          id: 'country',
          type: 'select',
          label: 'Country',
          placeholder: 'Select your country',
          required: true,
          options: [
            { label: 'United States', value: 'us' },
            { label: 'United Kingdom', value: 'uk' },
            { label: 'Canada', value: 'ca' },
            { label: 'Australia', value: 'au' },
            { label: 'Germany', value: 'de' },
            { label: 'France', value: 'fr' },
            { label: 'Japan', value: 'jp' },
            { label: 'India', value: 'in' },
          ],
        },
        {
          id: 'timezone',
          type: 'select',
          label: 'Timezone',
          placeholder: 'Select timezone',
          required: true,
          options: [
            { label: 'UTC-8 (Pacific)', value: 'pst' },
            { label: 'UTC-5 (Eastern)', value: 'est' },
            { label: 'UTC+0 (London)', value: 'gmt' },
            { label: 'UTC+1 (Berlin)', value: 'cet' },
            { label: 'UTC+5:30 (Mumbai)', value: 'ist' },
            { label: 'UTC+9 (Tokyo)', value: 'jst' },
          ],
        },
        {
          id: 'language',
          type: 'select',
          label: 'Preferred language',
          placeholder: 'Choose language',
          options: [
            { label: 'English', value: 'en' },
            { label: 'Spanish', value: 'es' },
            { label: 'French', value: 'fr' },
            { label: 'German', value: 'de' },
            { label: 'Japanese', value: 'ja' },
          ],
        },
      ],
    },
  ],
  settings: { submitText: 'Save Profile' },
};

function ProfileForm() {
  return (
    <SurveyRenderer
      schema={profileSchema}
      options={{
        onSubmit: async (answers) => {
          await fetch('/api/profile', {
            method: 'PUT',
            body: JSON.stringify(answers),
          });
        },
      }}
    />
  );
}