Textarea

A multi-line text input that grows with its content.

Your message will be copied to the support team.

Installation

pnpm dlx stera-ui add textarea

Usage

import { Textarea } from "@/components/ui/textarea"
<Textarea placeholder="Type your message here." />

With Field

Your message will be copied to the support team.

<Field>
  <FieldLabel htmlFor="message">Your message</FieldLabel>
  <Textarea id="message" placeholder="Type your message here." />
  <FieldDescription>Your message will be copied to the support team.</FieldDescription>
</Field>

With Button

<div className="flex flex-col gap-2">
  <Textarea placeholder="Type your message here." />
  <Button variant="brand" className="self-end">Send message</Button>
</div>

Disabled

Your message will be copied to the support team.

<Field data-disabled="true">
  <FieldLabel htmlFor="message">Your message</FieldLabel>
  <Textarea id="message" disabled />
</Field>

Invalid

<Field data-invalid="true">
  <FieldLabel htmlFor="message">Your message</FieldLabel>
  <Textarea id="message" aria-invalid="true" />
  <FieldError>Your message must be at least 10 characters.</FieldError>
</Field>

API Reference

Renders a <textarea> element. Uses field-sizing-content so the height grows automatically with content. Accepts all standard <textarea> props.