Textarea

A multi-line text area for collecting longer free-text responses such as comments, feedback, or detailed descriptions.

Schema Example

textareajson

{
  id: "comments",
  type: "textarea",
  label: "Any additional comments?",
  placeholder: "Share your thoughts...",
  description: "Your feedback helps us improve"
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
placeholder	string	Placeholder text shown inside the textarea.
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.).

Answer Format

Returns a string value. The textarea is vertically resizable by default.

Practical Example

Advanced Example

A bug report form with a detailed description textarea and character limit:

BugReportForm.tsxtsx

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

const bugReportSchema: SurveySchema = {
  id: 'bug-report',
  title: 'Report a Bug',
  pages: [
    {
      id: 'details',
      questions: [
        {
          id: 'bug-title',
          type: 'text',
          label: 'Bug title',
          placeholder: 'Brief summary of the issue',
          required: true,
        },
        {
          id: 'bug-description',
          type: 'textarea',
          label: 'Describe the bug',
          placeholder: 'Steps to reproduce, expected vs actual behavior...',
          required: true,
          description: 'Please include as much detail as possible',
          validation: [
            { type: 'minLength', value: 20, message: 'Please provide more detail (at least 20 chars)' },
            { type: 'maxLength', value: 2000, message: 'Maximum 2000 characters' },
          ],
        },
        {
          id: 'additional-context',
          type: 'textarea',
          label: 'Additional context',
          placeholder: 'Browser, OS, screenshots links...',
        },
      ],
    },
  ],
  settings: { submitText: 'Submit Bug Report' },
};

function BugReportForm() {
  return (
    <SurveyRenderer
      schema={bugReportSchema}
      options={{
        onSubmit: async (answers) => {
          console.log('Bug report:', answers);
        },
      }}
    />
  );
}