Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The Textarea component provides a multi-line text input with support for auto-growing, validation states, labels, and helper text.

​
Basic Usage

import { useState } from "react";
import { Textarea } from '@peppermint-design/devreadykit-custom';

export default function App() {
  const [value, setValue] = useState("");

  return (
    <div className="w-full max-w-xl space-y-4">
      <Textarea
        value={value}
        onValueChange={setValue}
        label="Message"
        placeholder="Hi! I’d like to know more about…"
        helperText="Be as specific as you can"
      />
    </div>
  );
}

​
Auto Growing

Enable automatic height adjustment based on content. 
import { Textarea } from '@peppermint-design/devreadykit-custom';

export default function AutoGrowExample() {
  return (
    <Textarea 
      label="Auto-growing textarea"
      placeholder="Type here and watch it grow..."
      autoGrow
      minRows={2}
    />
  );
}

​
Validation States

​
Error State

import { Textarea } from '@peppermint-design/devreadykit-custom';

export default function ErrorExample() {
  return (
    <Textarea 
      label="Message"
      placeholder="Enter your message..."
      errorMessage="Message is required and must be at least 10 characters"
      value="Short"
    />
  );
}

​
Disabled State

import { Textarea } from '@peppermint-design/devreadykit-custom';

export default function DisabledExample() {
  return (
    <Textarea 
      label="Disabled textarea"
      placeholder="Cannot edit this"
      disabled
      value="This is disabled"
    />
  );
}

​
Read Only State

import { Textarea } from '@peppermint-design/devreadykit-custom';

export default function ReadOnlyExample() {
  return (
    <Textarea 
      label="Read only textarea"
      placeholder="Cannot edit this"
      readOnly
      value="This is read only"
    />
  );
}

​
With Action Button

import { Button, Textarea } from '@peppermint-design/devreadykit-custom';

export default function ActionButtonExample() {
  return (
    <Textarea 
      label="Comment"
      placeholder="Write a comment..."
      action={
        <Button size="s" variant="plain">
          Post
        </Button>
      }
    />
  );
}

​
Props

PropTypeDefaultDescription
valuestring—Textarea value
onValueChange(value: string, event: ChangeEvent) => void—Change handler
labelReact.ReactNode—Label content
helperTextReact.ReactNode—Helper text
errorMessageReact.ReactNode—Error message
actionReact.ReactNode—Action button
autoGrowbooleanfalseAuto-grow height
minRowsnumber3Minimum rows
requiredbooleanfalseRequired field
disabledbooleanfalseDisabled state
readOnlybooleanfalseRead only state
classNamestring—Additional CSS classes

​
Examples

​
Contact Form

import { useState, type FormEvent } from "react";
import { Button, Textarea } from '@peppermint-design/devreadykit-custom';

export default function ContactForm() {
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (message.trim().length < 10) {
      setError("Message must be at least 10 characters long");
      return;
    }
    setError("");
    // Submit form
  };

  return (
    <form onSubmit={handleSubmit}>
      <Textarea
        value={message}
        onValueChange={(value) => {
          setMessage(value);
          if (error && value.trim().length >= 10) {
            setError("");
          }
        }}
        label="Your Message"
        placeholder="Tell us how we can help..."
        helperText="Please provide as much detail as possible"
        errorMessage={error}
        autoGrow
        minRows={4}
        required
      />
      
      <Button type="submit" variant="filled" className="mt-4">
        Send Message
      </Button>
    </form>
  );
}

​
Comment System

import { useState } from "react";
import { Button, Textarea } from '@peppermint-design/devreadykit-custom';

export default function CommentInput() {
  const [comment, setComment] = useState("");
  const [comments, setComments] = useState<string[]>([]);

  const handlePost = () => {
    if (!comment.trim()) return;
    setComments((prev) => [comment.trim(), ...prev]);
    setComment("");
  };

  return (
    <div className="space-y-4">
      <Textarea
        value={comment}
        onValueChange={setComment}
        placeholder="Write a comment..."
        autoGrow
        minRows={2}
        action={
          <Button 
            size="s" 
            variant="filled"
            disabled={!comment.trim()}
            onClick={handlePost}
          >
            Post
          </Button>
        }
      />
      <div className="space-y-2">
        {comments.map((entry, index) => (
          <div key={`${entry}-${index}`} className="p-2 border rounded">
            {entry}
          </div>
        ))}
      </div>
    </div>
  );
}

​
Feedback Form

import { useState } from "react";
import { Textarea } from '@peppermint-design/devreadykit-custom';

const MAX_LENGTH = 500;

export default function FeedbackForm() {
  const [feedback, setFeedback] = useState("");
  const remaining = MAX_LENGTH - feedback.length;
  const isNearLimit = remaining <= 50;

  return (
    <div>
      <Textarea
        value={feedback}
        onValueChange={setFeedback}
        label="Feedback"
        placeholder="Share your thoughts..."
        helperText={`${feedback.length}/${MAX_LENGTH} characters`}
        autoGrow
        minRows={3}
        maxLength={MAX_LENGTH}
      />
      
      <div className="mt-2 text-sm text-gray-600 font-mono">
        {isNearLimit && (
          <span className="text-orange-600 font-mono">
            {remaining} characters remaining
          </span>
        )}
      </div>
    </div>
  );
}