Phone

A phone number input with an optional countryCode prefix and built-in phone validation rule. Uses the browser's native tel input type for mobile keyboard optimization.

Schema Example

phonejson

{
  id: "phone",
  type: "phone",
  label: "Phone number",
  required: true,
  countryCode: "+1",
  placeholder: "(555) 123-4567",
  validation: [
    { type: "phone", message: "Please enter a valid phone number" }
  ]
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
countryCode	string	Country dial code displayed as a prefix badge (e.g. `"+1"`, `"+91"`, `"+44"`).
placeholder	string	Placeholder text for the input. Defaults to `"Enter phone number"`.
required	boolean	Whether a phone number must be provided.
defaultValue	string	Default phone number value.
description	string	Optional helper text displayed below the label.
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Custom validation rules. Use the built-in `phone` rule type, or `pattern` for a custom regex.

With Validation

Phone with validationjson

// Built-in phone validation
{
  id: "mobile",
  type: "phone",
  label: "Mobile number",
  required: true,
  countryCode: "+91",
  validation: [
    { type: "phone", message: "Enter a valid phone number" }
  ]
}

// Custom pattern for US numbers
{
  id: "us-phone",
  type: "phone",
  label: "US phone number",
  countryCode: "+1",
  placeholder: "(555) 123-4567",
  validation: [
    {
      type: "pattern",
      value: "^\\(?\\d{3}\\)?[\\s.-]?\\d{3}[\\s.-]?\\d{4}$",
      message: "Please enter a valid US phone number"
    }
  ]
}

Country Code Examples

Country codesjson

// US / Canada
{ id: "phone-us", type: "phone", label: "Phone", countryCode: "+1" }

// UK
{ id: "phone-uk", type: "phone", label: "Phone", countryCode: "+44" }

// India
{ id: "phone-in", type: "phone", label: "Phone", countryCode: "+91" }

// Germany
{ id: "phone-de", type: "phone", label: "Phone", countryCode: "+49" }

// No country code prefix
{ id: "phone-any", type: "phone", label: "Phone number" }

Answer Format

Returns a string containing the phone number as entered by the user (e.g. "(555) 123-4567"). The countryCode is displayed visually but is not included in the answer value.

Practical Example

Advanced Example

A contact form collecting phone numbers with country codes:

ContactForm.tsxtsx

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

const contactSchema: SurveySchema = {
  id: 'contact-form',
  title: 'Contact Information',
  pages: [
    {
      id: 'info',
      questions: [
        {
          id: 'name',
          type: 'text',
          label: 'Full name',
          required: true,
        },
        {
          id: 'email',
          type: 'email',
          label: 'Email address',
          required: true,
        },
        {
          id: 'phone',
          type: 'phone',
          label: 'Phone number',
          required: true,
          countryCode: '+1',
          placeholder: '(555) 123-4567',
          validation: [
            { type: 'phone', message: 'Please enter a valid phone number' },
          ],
        },
        {
          id: 'preferred-contact',
          type: 'radio',
          label: 'Preferred contact method',
          options: [
            { label: 'Email', value: 'email' },
            { label: 'Phone', value: 'phone' },
            { label: 'Either', value: 'either' },
          ],
        },
        {
          id: 'best-time',
          type: 'time',
          label: 'Best time to call',
          visibleIf: "{preferred-contact} === 'phone'",
          minTime: '09:00',
          maxTime: '18:00',
        },
      ],
    },
  ],
  settings: { submitText: 'Save Contact' },
};

function ContactForm() {
  return (
    <SurveyRenderer
      schema={contactSchema}
      options={{
        onSubmit: async (answers) => {
          // answers.phone → "(555) 123-4567"
          console.log('Contact saved:', answers);
        },
      }}
    />
  );
}