Textarea

Textarea allows users to enter text in multiple lines.

This page is not up to date. Some of the examples might not work as expected.
Class name		Type
textarea
Component
For <textarea> element
textarea-ghost
Style
ghost style
textarea-primary
Color
primary color
textarea-secondary
Color
secondary color
textarea-accent
Color
accent color
textarea-info
Color
info color
textarea-success
Color
success color
textarea-warning
Color
warning color
textarea-error
Color
error color
table-xs
Size
Extra small size
table-sm
Size
Small size
table-md
Size
Medium size (default)
table-lg
Size
Large size
table-xl
Size
Extra large size

Textarea

<textarea class="$$textarea" placeholder="Bio"></textarea>
<textarea class="$$textarea" placeholder="Bio"></textarea>

Textarea with border

<textarea class="$$textarea $$textarea-bordered" placeholder="Bio"></textarea>
<textarea class="$$textarea $$textarea-bordered" placeholder="Bio"></textarea>

Ghost (no background)

<textarea class="$$textarea $$textarea-ghost" placeholder="Bio"></textarea>
<textarea class="$$textarea $$textarea-ghost" placeholder="Bio"></textarea>

With form control and labels

<label class="$$form-control">
  <div class="$$label">
    <span class="$$label-text">Your bio</span>
    <span class="$$label-text-alt">Alt label</span>
  </div>
  <textarea class="$$textarea $$textarea-bordered h-24" placeholder="Bio"></textarea>
  <div class="$$label">
    <span class="$$label-text-alt">Your bio</span>
    <span class="$$label-text-alt">Alt label</span>
  </div>
</label>
<label class="$$form-control">
  <div class="$$label">
    <span class="$$label-text">Your bio</span>
    <span class="$$label-text-alt">Alt label</span>
  </div>
  <textarea class="$$textarea $$textarea-bordered h-24" placeholder="Bio"></textarea>
  <div class="$$label">
    <span class="$$label-text-alt">Your bio</span>
    <span class="$$label-text-alt">Alt label</span>
  </div>
</label>

Primary color

<textarea class="$$textarea $$textarea-primary" placeholder="Bio"></textarea>
<textarea class="$$textarea $$textarea-primary" placeholder="Bio"></textarea>

Secondary color

<textarea class="$$textarea $$textarea-secondary" placeholder="Bio"></textarea>
<textarea class="$$textarea $$textarea-secondary" placeholder="Bio"></textarea>

Accent color

<textarea class="$$textarea $$textarea-accent" placeholder="Bio"></textarea>
<textarea class="$$textarea $$textarea-accent" placeholder="Bio"></textarea>

Info color

<textarea class="$$textarea $$textarea-info" placeholder="Bio"></textarea>
<textarea class="$$textarea $$textarea-info" placeholder="Bio"></textarea>

Success color

<textarea class="$$textarea $$textarea-success" placeholder="Bio"></textarea>
<textarea class="$$textarea $$textarea-success" placeholder="Bio"></textarea>

Warning color

<textarea class="$$textarea $$textarea-warning" placeholder="Bio"></textarea>
<textarea class="$$textarea $$textarea-warning" placeholder="Bio"></textarea>

Error color

<textarea class="$$textarea $$textarea-error" placeholder="Bio"></textarea>
<textarea class="$$textarea $$textarea-error" placeholder="Bio"></textarea>

Sizes

<!-- xs -->
<textarea
  placeholder="Bio"
  class="$$textarea $$textarea-bordered $$textarea-xs w-full max-w-xs"></textarea>
<!-- sm -->
<textarea
  placeholder="Bio"
  class="$$textarea $$textarea-bordered $$textarea-sm w-full max-w-xs"></textarea>
<!-- md -->
<textarea
  placeholder="Bio"
  class="$$textarea $$textarea-bordered $$textarea-md w-full max-w-xs"></textarea>
<!-- lg -->
<textarea
  placeholder="Bio"
  class="$$textarea $$textarea-bordered $$textarea-lg w-full max-w-xs"></textarea>
<!-- xs -->
<textarea
  placeholder="Bio"
  class="$$textarea $$textarea-bordered $$textarea-xs w-full max-w-xs"></textarea>
<!-- sm -->
<textarea
  placeholder="Bio"
  class="$$textarea $$textarea-bordered $$textarea-sm w-full max-w-xs"></textarea>
<!-- md -->
<textarea
  placeholder="Bio"
  class="$$textarea $$textarea-bordered $$textarea-md w-full max-w-xs"></textarea>
<!-- lg -->
<textarea
  placeholder="Bio"
  class="$$textarea $$textarea-bordered $$textarea-lg w-full max-w-xs"></textarea>

Disabled

<textarea class="$$textarea" placeholder="Bio" disabled></textarea>
<textarea class="$$textarea" placeholder="Bio" disabled></textarea>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser