Skip to main content
components

Textarea

A multi-line text input that automatically adjusts its height.

Package@g4rcez/componentsSectionForm Controls

Examples

Basic Textarea

A simple textarea component that expands vertically as text is entered.

Textarea
tsx
"use client";
import { Textarea } from "@g4rcez/components";

function BasicTextarea() {
  return (
    <Textarea title="Textarea" placeholder="Write something here..." />
  );
}

Field Sizes

Use size=normal or size=small to match dense or default form layouts.

Sizes
tsx
import { Textarea } from "@g4rcez/components";

function TextareaSizes() {
  return (
    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
      <Textarea size="normal" title="Normal textarea" placeholder="Default field height" />
      <Textarea size="small" title="Small textarea" placeholder="Dense field height" />
    </div>
  );
}

When to use Textarea

Use when

You need the documented Textarea interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Textarea behavior you need.

Accessibility

Keep the Textarea labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.