Email

An email input field with automatic format validation. Uses the browser's native email input type for keyboard hints on mobile.

Schema Example

emailjson

{
  id: "email",
  type: "email",
  label: "Email address",
  placeholder: "you@example.com",
  required: true
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
placeholder	string	Placeholder text shown inside the input.
required	boolean	Whether the field must be filled in.
defaultValue	string	Pre-filled default email value.
description	string	Optional helper text displayed below the label.
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Validation rules. The built-in "email" rule validates format automatically.

With Validation

Email with validationjson

{
  id: "work-email",
  type: "email",
  label: "Work email",
  required: true,
  validation: [
    { type: "email", message: "Please enter a valid email address" }
  ]
}

Answer Format

Returns a string value containing the email address.

Practical Example

Advanced Example

A waitlist signup form with email validation and a confirmation message:

WaitlistForm.tsxtsx

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

const waitlistSchema: SurveySchema = {
  id: 'waitlist',
  title: 'Join the Waitlist',
  description: 'Be the first to know when we launch.',
  pages: [
    {
      id: 'signup',
      questions: [
        {
          id: 'name',
          type: 'text',
          label: 'Your name',
          placeholder: 'Jane Doe',
          required: true,
        },
        {
          id: 'email',
          type: 'email',
          label: 'Email address',
          placeholder: 'you@company.com',
          required: true,
          validation: [
            { type: 'email', message: 'Please enter a valid email' },
          ],
        },
        {
          id: 'role',
          type: 'select',
          label: 'Your role',
          placeholder: 'Select your role',
          options: [
            { label: 'Developer', value: 'dev' },
            { label: 'Designer', value: 'design' },
            { label: 'Product Manager', value: 'pm' },
            { label: 'Other', value: 'other' },
          ],
        },
      ],
    },
  ],
  settings: { submitText: 'Join Waitlist' },
};

function WaitlistForm() {
  return (
    <SurveyRenderer
      schema={waitlistSchema}
      options={{
        onSubmit: async (answers) => {
          await fetch('/api/waitlist', {
            method: 'POST',
            body: JSON.stringify(answers),
          });
        },
      }}
      renderComplete={() => (
        <div style={{ textAlign: 'center', padding: 40 }}>
          <h2>You&apos;re on the list!</h2>
          <p>We&apos;ll notify you at {'{your email}'} when we launch.</p>
        </div>
      )}
    />
  );
}