Textarea

Feedback

Your feedback goes to the product team.

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

export default function TextareaDemo() {
  return (
    <TextareaField
      className="w-full max-w-sm"
      label="Feedback"
      placeholder="What could we do better?"
      description="Your feedback goes to the product team."
    />
  );
}

Installation

$ pnpm dlx shadcn@latest add @desyne/textarea

The CLI installs dependencies and any other components this one uses.

Usage

tsx

import { Textarea, TextareaField } from "@/components/ui/textarea";

tsx

<TextareaField label="Description" name="description" placeholder="Describe the issue" />

The file exports two components:

TextareaField — a React Aria TextField with a label, description, character count and error message around a Textarea. Use it in forms.
Textarea — just the styled <textarea>. Use it when you lay out the label yourself, or inside a custom composer.

The two onChange signatures differ

TextareaField is a React Aria field, so onChange receives the new string: onChange={setValue}. A standalone Textarea is a plain textarea element, so onChange receives the event: onChange={(e) => setValue(e.target.value)}.

When to use

Textarea — free-form text that may span several lines: comments, bios, descriptions, messages.
Text Field — short, single-line values such as names, emails or titles.
Search Field — search queries.
A rich-text editor — when users need formatting, mentions or embeds. A textarea holds plain text only.

Anatomy

tsx

<TextareaField>      {/* root: React Aria TextField, owns value and validation */}
  <Label />          {/* from `label` */}
  <Textarea />       {/* the native <textarea> */}
  <div>              {/* only when there is a description or a count */}
    <Description />  {/* from `description` */}
    <span />         {/* `value.length / maxLength` when `showCount` */}
  </div>
  <FieldError />     {/* shown only while invalid */}
</TextareaField>

Part	Renders	Notes
`TextareaField`	`<div>`	Root. Carries `data-slot="textarea-field"`, the `group/field` class and all state attributes.
`Label`	`<label>`	Rendered when `label` is set. Adds a red `*` when `isRequired`.
`Textarea`	`<textarea>`	The control itself, styled by `textareaVariants`. Carries `data-slot="textarea"`. Receives `placeholder`, `rows`, `variant` and `resize` from the field.
`Description`	`<span slot="description">`	Rendered when `description` is set. Linked with `aria-describedby`.
Count	`<span>`	Rendered when `showCount` and `maxLength` are both set. Right-aligned, tabular numbers.
`FieldError`	`<span slot="errorMessage">`	Rendered only while the field is invalid.

Examples

Variants

outline for most forms, filled for dense layouts and tinted surfaces, underlined for minimal, inline editing. They match the variants of the other field components.

Outline

Filled

Underlined

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

export default function TextareaVariants() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <TextareaField
        variant="outline"
        label="Outline"
        placeholder="Default style for most forms"
      />
      <TextareaField
        variant="filled"
        label="Filled"
        placeholder="Muted background for dense layouts"
      />
      <TextareaField
        variant="underlined"
        label="Underlined"
        placeholder="Bottom border only"
      />
    </div>
  );
}

Resize behavior

resize="vertical" (default) lets users drag the corner. none keeps a fixed height and scrolls. auto grows the textarea with its content using CSS field-sizing: content; in browsers without support it falls back to a fixed height. Use rows to set the initial height; the minimum is 80px.

Vertical (default)

Drag the corner to resize.

None

Fixed height; content scrolls.

Auto

Grows with its content.

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

export default function TextareaResize() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <TextareaField
        label="Vertical (default)"
        rows={3}
        description="Drag the corner to resize."
        defaultValue="Users can make this taller or shorter."
      />
      <TextareaField
        label="None"
        resize="none"
        rows={3}
        description="Fixed height; content scrolls."
        defaultValue="The height stays at three rows no matter what."
      />
      <TextareaField
        label="Auto"
        resize="auto"
        description="Grows with its content."
        defaultValue={
          "Type a few more lines here.\nThe field grows to fit them."
        }
      />
    </div>
  );
}

Character count

showCount shows value.length / maxLength under the field when maxLength is set. It works on controlled and uncontrolled fields: with value the count reads from it, otherwise the field tracks the length itself, starting from defaultValue. Your onChange is still called. maxLength also stops input at the limit.

Bio

Grows with its content.19/160

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

export default function TextareaCount() {
  return (
    <TextareaField
      className="w-full max-w-sm"
      label="Bio"
      placeholder="A few words about you"
      defaultValue="Designer in Lisbon."
      maxLength={160}
      showCount
      resize="auto"
      description="Grows with its content."
    />
  );
}

Disabled and read only

isDisabled dims the field and removes it from the tab order. isReadOnly keeps the text focusable and selectable, which suits quoting an original message.

Internal notes

Notes are locked once a ticket is closed.

Original message

Hi team, the export button on the reports page returns a 500 error since this morning.

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

export default function TextareaDisabled() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <TextareaField
        label="Internal notes"
        isDisabled
        defaultValue="Customer asked for a refund on the annual plan."
        description="Notes are locked once a ticket is closed."
      />
      <TextareaField
        label="Original message"
        isReadOnly
        resize="none"
        defaultValue="Hi team, the export button on the reports page returns a 500 error since this morning."
      />
    </div>
  );
}

Required and native validation

isRequired, minLength and maxLength use the browser's constraint validation. With the default validationBehavior="native", the form won't submit while the field is invalid and the browser's message appears on submit.

import { Form } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { TextareaField } from "@/components/ui/textarea";

export default function TextareaValidation() {
  return (
    <Form
      className="flex w-full max-w-sm flex-col gap-4"
      onSubmit={(e) => e.preventDefault()}
    >
      <TextareaField
        label="Steps to reproduce"
        name="steps"
        isRequired
        rows={4}
        placeholder={"1. Open the reports page\n2. Click Export\n3. …"}
      />
      <Button type="submit" className="self-start">
        File bug
      </Button>
    </Form>
  );
}

Custom validation

validate receives the current value and returns an error string, or null when valid. With validationBehavior="aria" on the Form, errors appear live as the user types.

import { Form } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { TextareaField } from "@/components/ui/textarea";

const wordCount = (value: string) =>
  value.trim() ? value.trim().split(/\s+/).length : 0;

export default function TextareaCustomValidation() {
  return (
    <Form
      className="flex w-full max-w-sm flex-col gap-4"
      validationBehavior="aria"
      onSubmit={(e) => e.preventDefault()}
    >
      <TextareaField
        label="Why are you cancelling?"
        name="reason"
        defaultValue="Too pricey"
        description="At least 5 words, so we can act on it."
        validate={(value) => {
          if (/https?:\/\//.test(value)) return "Links aren't allowed here.";
          const words = wordCount(value);
          return words > 0 && words < 5
            ? `Add ${5 - words} more word${5 - words === 1 ? "" : "s"}.`
            : null;
        }}
      />
      <Button
        type="submit"
        variant="solid"
        color="danger"
        className="self-start"
      >
        Cancel subscription
      </Button>
    </Form>
  );
}

Form submission

Give the field a name and its value is included in FormData, line breaks and all.

import { useState } from "react";
import { Form } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { TextareaField } from "@/components/ui/textarea";

export default function TextareaForm() {
  const [data, setData] = useState<Record<string, FormDataEntryValue> | null>(
    null,
  );
  return (
    <Form
      className="flex w-full max-w-sm flex-col gap-4"
      onSubmit={(e) => {
        e.preventDefault();
        setData(Object.fromEntries(new FormData(e.currentTarget)));
      }}
    >
      <TextareaField
        label="Release notes"
        name="notes"
        rows={3}
        isRequired
        defaultValue="Fixed CSV export for reports with more than 10k rows."
      />
      <Button type="submit" className="self-start">
        Publish release
      </Button>
      {data && (
        <code className="rounded-md bg-muted px-2 py-1 text-xs">
          {JSON.stringify(data)}
        </code>
      )}
    </Form>
  );
}

Standalone

Textarea on its own is a styled <textarea> with the same variant and resize options. It has no label, so pass aria-label or aria-labelledby.

import { Textarea } from "@/components/ui/textarea";

export default function TextareaStandalone() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Textarea aria-label="Message" placeholder="Type your message here." />
      <Textarea
        aria-label="Notes"
        variant="filled"
        resize="none"
        rows={2}
        placeholder="Filled, fixed height"
      />
    </div>
  );
}

Custom composition

Build your own field from React Aria's TextField, the Label, Description and FieldError parts in field.tsx, and Textarea. Here the description sits above the input and the label row carries an "Optional" hint. Add group/field to the root so the label reacts to the disabled and required states.

Delivery instructionsOptional

Gate codes, where to leave the parcel, pets.

import { TextField } from "react-aria-components";
import { Description, FieldError, Label } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaComposition() {
  return (
    <TextField
      className="group/field flex w-full max-w-sm flex-col gap-1.5"
      name="instructions"
      maxLength={500}
    >
      <div className="flex items-baseline justify-between">
        <Label>Delivery instructions</Label>
        <span className="text-muted-foreground text-xs">Optional</span>
      </div>
      <Description>Gate codes, where to leave the parcel, pets.</Description>
      <Textarea
        rows={3}
        resize="none"
        placeholder="Leave it with the front desk in building B."
      />
      <FieldError />
    </TextField>
  );
}

Recipes

Comment composer

A borderless Textarea inside a bordered box with a toolbar, growing with its content. ⌘ + Enter posts the comment via onKeyDown.

⌘Enter

import { AtSignIcon, PaperclipIcon, SmileIcon } from "lucide-react";
import { useState } from "react";
import { Avatar } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Kbd } from "@/components/ui/kbd";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaRecipeComment() {
  const [value, setValue] = useState("");
  const [comments, setComments] = useState<string[]>([]);

  const submit = () => {
    if (!value.trim()) return;
    setComments((c) => [...c, value.trim()]);
    setValue("");
  };

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      {comments.map((comment, i) => (
        // biome-ignore lint/suspicious/noArrayIndexKey: append-only demo list
        <div key={i} className="flex gap-3 text-sm">
          <Avatar size="sm" fallback="AL" colorful alt="Ada Lovelace" />
          <p className="whitespace-pre-wrap pt-0.5">{comment}</p>
        </div>
      ))}
      <div className="flex gap-3">
        <Avatar size="sm" fallback="AL" colorful alt="Ada Lovelace" />
        <div className="flex-1 rounded-md border border-input bg-card shadow-xs focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/20 dark:bg-input/20">
          <Textarea
            aria-label="Add a comment"
            placeholder="Add a comment…"
            resize="auto"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                e.preventDefault();
                submit();
              }
            }}
            className="min-h-16 border-0 bg-transparent shadow-none data-focused:ring-0 dark:bg-transparent"
          />
          <div className="flex items-center gap-1 px-1.5 pb-1.5">
            <Button size="icon-sm" variant="ghost" aria-label="Attach file">
              <PaperclipIcon />
            </Button>
            <Button size="icon-sm" variant="ghost" aria-label="Mention someone">
              <AtSignIcon />
            </Button>
            <Button size="icon-sm" variant="ghost" aria-label="Add emoji">
              <SmileIcon />
            </Button>
            <span className="ml-auto hidden items-center gap-1 text-muted-foreground text-xs sm:flex">
              <Kbd size="sm">⌘</Kbd>
              <Kbd size="sm">Enter</Kbd>
            </span>
            <Button size="sm" isDisabled={!value.trim()} onPress={submit}>
              Comment
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

Feedback form

A Select for the topic, a counted TextareaField, a pending submit button and a success state.

import { CheckCircle2Icon } from "lucide-react";
import { useState } from "react";
import { Form } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { Select, SelectItem } from "@/components/ui/select";
import { TextareaField } from "@/components/ui/textarea";

export default function TextareaRecipeFeedback() {
  const [message, setMessage] = useState("");
  const [sent, setSent] = useState(false);
  const [pending, setPending] = useState(false);

  if (sent) {
    return (
      <div className="flex w-full max-w-md flex-col items-center gap-2 rounded-xl border bg-card p-8 text-center">
        <CheckCircle2Icon className="size-6 text-success" />
        <p className="font-medium">Thanks for the feedback</p>
        <p className="text-muted-foreground text-sm">
          The product team reads every message.
        </p>
      </div>
    );
  }

  return (
    <Form
      className="flex w-full max-w-md flex-col gap-4 rounded-xl border bg-card p-5"
      onSubmit={async (e) => {
        e.preventDefault();
        setPending(true);
        await new Promise((r) => setTimeout(r, 800));
        setPending(false);
        setSent(true);
      }}
    >
      <div>
        <h3 className="font-semibold">Send feedback</h3>
        <p className="text-muted-foreground text-sm">
          Tell us what's working and what isn't.
        </p>
      </div>
      <Select label="Topic" name="topic" defaultSelectedKey="idea">
        <SelectItem id="idea">Feature idea</SelectItem>
        <SelectItem id="bug">Something is broken</SelectItem>
        <SelectItem id="billing">Billing</SelectItem>
      </Select>
      <TextareaField
        label="Message"
        name="message"
        isRequired
        rows={4}
        maxLength={1000}
        showCount
        value={message}
        onChange={setMessage}
        placeholder="The more detail, the better."
      />
      <div className="flex justify-end gap-2">
        <Button type="reset" variant="ghost" onPress={() => setMessage("")}>
          Clear
        </Button>
        <Button type="submit" isPending={pending}>
          Send
        </Button>
      </div>
    </Form>
  );
}

Accessibility

TextareaField links the label, description and error message to the textarea with aria-labelledby and aria-describedby.
A standalone Textarea needs aria-label or aria-labelledby. A placeholder is not a label.
Invalid fields get aria-invalid, and the error text is announced.
The character count is plain text and isn't linked to the textarea. Mention the limit in description if screen-reader users need it up front.
Enter inserts a new line. If you add a submit shortcut, use a modifier (⌘ / Ctrl + Enter) and show it visibly, as in the comment recipe.

Keyboard

Key	Action
`Tab`	Moves focus into and out of the textarea
`Enter`	Inserts a new line

Styling

Data attributes

On the TextareaField root. Children can react with group-data-*/field: variants.

Attribute	Present when
`data-disabled`	`isDisabled` is true
`data-readonly`	`isReadOnly` is true
`data-required`	`isRequired` is true
`data-invalid`	Validation failed, or `isInvalid` is true

On the Textarea element (the variants style these):

Attribute	Present when
`data-hovered`	Hovered with a mouse or pen
`data-focused`	The textarea has focus
`data-focus-visible`	Focus came from the keyboard
`data-invalid`	The field is invalid
`data-disabled`	The field is disabled

Slots

`data-slot`	Element
`textarea-field`	Root of `TextareaField`
`textarea`	`<textarea>`
`label`, `description`, `field-error`	Field text

`textareaVariants`

The tailwind-variants function behind Textarea, with variant (outline, filled, underlined) and resize (none, vertical, auto). Use it to style a textarea from another library the same way.

tsx

import { textareaVariants } from "@/components/ui/textarea";

<textarea className={textareaVariants({ variant: "filled", resize: "none" })} />;

className on TextareaField styles the root; on Textarea it styles the textarea and also accepts a function of its render state (isFocused, isHovered, isInvalid, isDisabled).

API Reference

TextareaField

Prop

Type

Also accepts every prop of React Aria's TextField.

Textarea

Prop

Type

Accepts every native <textarea> attribute, plus the props of React Aria's TextArea. Inside a TextField, the field supplies the value, id and ARIA attributes.

Text Field — the single-line version, and the shared field building blocks.
Search Field — for search queries.
Select — shares the same field variants.