Text Input

A single-line text field for collecting short free-text answers such as names, titles, or brief responses.

Schema Example

textjson

{
  id: "name",
  type: "text",
  label: "What is your name?",
  placeholder: "Enter your full name",
  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 value.
description	string	Optional helper text displayed below the label.
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Validation rules (minLength, maxLength, pattern, etc.).

With Validation

Validation examplejson

{
  id: "username",
  type: "text",
  label: "Username",
  required: true,
  validation: [
    { type: "minLength", value: 3, message: "At least 3 characters" },
    { type: "maxLength", value: 20, message: "Maximum 20 characters" },
    { type: "pattern", value: "^[a-zA-Z0-9_]+$", message: "Only letters, numbers, and underscores" }
  ]
}

Answer Format

Returns a string value.

Practical Example

Advanced Example

A contact form that collects the user's full name with validation:

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 Us',
  pages: [
    {
      id: 'info',
      questions: [
        {
          id: 'full-name',
          type: 'text',
          label: 'Full name',
          placeholder: 'Jane Doe',
          required: true,
          validation: [
            { type: 'minLength', value: 2, message: 'Name is too short' },
            { type: 'maxLength', value: 50, message: 'Name is too long' },
          ],
        },
        {
          id: 'subject',
          type: 'text',
          label: 'Subject',
          placeholder: 'How can we help?',
          required: true,
        },
      ],
    },
  ],
};

function ContactForm() {
  return (
    <SurveyRenderer
      schema={contactSchema}
      options={{
        onSubmit: async (answers) => {
          await fetch('/api/contact', {
            method: 'POST',
            body: JSON.stringify(answers),
          });
        },
      }}
    />
  );
}