Textarea

The Textarea component is a flexible and styled multi-line input field that supports labels, error messages, controlled/uncontrolled values, and integration with form libraries like React Hook Form.

import { Textarea } from "tawuniya/components";

👉 View in Storybook

---

Props

Prop	Type	Default	Description
label	string	—	Optional label displayed above the textarea.
placeholder	string	"Additional Note"	Placeholder text inside the textarea.
name	string	—	Name of the textarea field (required for forms).
maxLength	number	—	Maximum number of characters allowed.
register	any	—	React Hook Form register function.
error	string	—	Error message to display below the textarea.
disabled	boolean	false	Disables the textarea if true.
value	string	—	Controlled value for the textarea.
ref	React.RefObject<HTMLTextAreaElement>	—	Reference to the underlying textarea element.
className	string	—	Additional Tailwind CSS classes for the textarea.
onChange	(value: string) => void	—	Callback fired when the value changes (if uncontrolled by register).
size	`"sm"	"md"	"lg"`	"md"	Determines the textarea size based on the textareaVariants.

Usage

With Controlled Form

import { useState } from "react";
import { Textarea } from "tawuniya/components";

export default function BasicExample() {
  const [note, setNote] = useState<string>("");

  return (
    <TextArea label="Notes" value={note} onChange={setNote} name="notes" />
  );
}

With Error Message

<TextArea label="Notes" name="notes" error="This field is required" />

With React Hook Form

import { useForm } from "react-hook-form";
import { Textarea } from "tawuniya/components";

export default function FormExample() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: { notes: "" },
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  return (
    <TextArea
      label="Notes"
      name="notes"
      register={register}
      error={errors.notes?.message}
    />
  );
}

Variants

• Size

  • sm → Compact height and text size
  • md → Medium height and text size
  • lg → Large height and text size

Notes

• Works as a controlled component with value + onChange, or with React Hook Form via register prop.
• Supports labels and error messages.
• Supports Tailwind CSS variants for sizing.
• Error state changes border and text color automatically.