Textarea

PreviousNext

Multiline inset field with compact sizing and consistent validation feedback.

Optional. Add useful context for your request.

import { TextareaField } from "@/components/matos-ui/textarea";

export function TextareaDemo() {
  return (
    <div className="mx-auto w-full max-w-sm">
      <TextareaField
        label="Additional notes"
        description="Optional. Add useful context for your request."
        placeholder="What would you like to build?"
      />
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/textarea.json

Usage

import { TextareaField } from "@/components/matos-ui/textarea"

<TextareaField
  label="Notes"
  description="Optional context for your request."
  error={errors.note?.message}
  {...register("note")}
/>

Use variant="muted" or textareaSize="sm" for denser compositions.