GitHub
New

Textarea

Displays a form textarea or a component that looks like a textarea.

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


export default function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />;
}

Installation

Usage

import { Textarea } from "~/components/ui/textarea";
<Textarea />

Field

Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

Enter your message below.

import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
import { Textarea } from "~/components/ui/textarea";


export default function TextareaField() {
  return (
    <Field>
      <FieldLabel for="textarea-message">Message</FieldLabel>
      <FieldDescription>Enter your message below.</FieldDescription>
      <Textarea id="textarea-message" placeholder="Type your message here." />
    </Field>
  );
}

Disabled

Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

import { Field, FieldLabel } from "~/components/ui/field";
import { Textarea } from "~/components/ui/textarea";


export default function TextareaDisabled() {
  return (
    <Field data-disabled>
      <FieldLabel for="textarea-disabled">Message</FieldLabel>
      <Textarea id="textarea-disabled" placeholder="Type your message here." disabled />
    </Field>
  );
}

Invalid

Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

Please enter a valid message.

import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
import { Textarea } from "~/components/ui/textarea";


export default function TextareaInvalid() {
  return (
    <Field data-invalid>
      <FieldLabel for="textarea-invalid">Message</FieldLabel>
      <Textarea id="textarea-invalid" placeholder="Type your message here." aria-invalid />
      <FieldDescription>Please enter a valid message.</FieldDescription>
    </Field>
  );
}

Button

Pair with Button to create a textarea with a submit button.

import { Button } from "~/components/ui/button";
import { Textarea } from "~/components/ui/textarea";


export default function TextareaButton() {
  return (
    <div class="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  );
}

API Reference

Textarea is a styled native textarea element. See the HTML textarea element reference for its native props, keyboard behavior, and accessibility semantics.