Textareas

Examples

Variants

invalid

Vanilla CSS

  <textarea
    class="textarea textarea-bordered"
    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" />

Sizes

Vanilla CSS

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

React

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

Disabled

Disabled

Vanilla CSS

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

React

<Textarea disabled defaultValue="Disabled" />

Inside a Field

Same Base UI wiring as Input — label, description, validation, invalid border tint.

Notes

Markdown is supported.

Vanilla CSS

<div class="field">
  <label class="field-label" for="notes">Notes</label>
  <textarea
    id="notes"
    class="textarea textarea-bordered"
    placeholder="Anything you'd like to share"
  ></textarea>
  <p class="field-description">Markdown is supported.</p>
</div>

React

<Field name="notes">
  <Field.Label>Notes</Field.Label>
  <Textarea placeholder="Anything you'd like to share" />
  <Field.Description>Markdown is supported.</Field.Description>
</Field>