Textareas

Examples

Variants

invalid

Vanilla CSS

  <textarea class="textarea" placeholder="Bordered (default)"></textarea>
  <textarea class="textarea textarea-ghost" placeholder="Ghost"></textarea>
  <textarea class="textarea textarea-danger" placeholder="Danger">
invalid</textarea
  >

React

<Textarea placeholder="Bordered (default)" />
<Textarea variant="ghost" placeholder="Ghost" />
<Textarea variant="danger" defaultValue="invalid" />

Status variants

Info Success Warning

Vanilla CSS

<textarea class="textarea textarea-info">Info</textarea>
<textarea class="textarea textarea-success">Success</textarea>
<textarea class="textarea textarea-warning">Warning</textarea>

React

<Textarea variant="info" defaultValue="Info" />
<Textarea variant="success" defaultValue="Success" />
<Textarea variant="warning" defaultValue="Warning" />

Sizes

Vanilla CSS

<textarea class="textarea textarea-sm" placeholder="Small"></textarea>
<textarea class="textarea" placeholder="Medium"></textarea>
<textarea class="textarea textarea-lg" placeholder="Large"></textarea>

React

<Textarea textareaSize="sm" placeholder="Small" />
<Textarea placeholder="Medium" />
<Textarea textareaSize="lg" placeholder="Large" />

Auto-resize

Vanilla CSS

<textarea
  class="textarea textarea-autosize"
  rows="4"
  placeholder="Grows as you type"
></textarea>

React

<Textarea autoResize rows={4} placeholder="Grows as you type" />

Disabled

Disabled

Vanilla CSS

<textarea class="textarea" disabled>Disabled</textarea>

React

<Textarea disabled defaultValue="Disabled" />

Reference

React

Prop	Type	Default
variant	"bordered" | "ghost" | "danger" | "info" | "success" | "warning"	"bordered"
textareaSize	"sm" | "md" | "lg"	"md"
autoResize	boolean	false

The size prop is textareaSize, not size, because <textarea> has no native size but the type would still collide — see Conventions › Sizes.

Renders a <textarea> through Base UI’s Field.Control, so inside a Field it gets the same id, label association and validity wiring as an Input, and works standalone outside one. Plus native <textarea> attributes.

Vanilla

Class	Effect
textarea	Full-width box, 0.75rem/0.5rem padding, 0.5rem radius, text-sm, 5rem min-height, vertically resizable
textarea-ghost	No fill or border until hover
textarea-danger	Danger border and focus outline
textarea-info textarea-success textarea-warning	Status border and focus outline
textarea-sm	text-xs, tighter padding, 4rem min-height
textarea-lg	text-base, looser padding, 6rem min-height
textarea-autosize	Height tracks content and manual resizing is off

There is no textarea-bordered or textarea-md — both are the unmodified textarea. The status variants tint the border and focus ring only, never the text: warning’s yellow fails AA at text size.

textarea-autosize is field-sizing: content, so growth needs no JavaScript. Its floor is whichever is larger, the class’s min-height or the rows attribute; cap it with your own max-height. Chromium-only today — elsewhere the box stays fixed and resizable, which is the same as omitting the class.