Textarea

Textarea allows users to enter text in multiple lines.

Class name
Type
textarea
Component
For <textarea> element
textarea-ghost
Style
ghost style
textarea-neutral
Color
neutral color
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>

Ghost (no background)

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

With form control and labels

Your bio
Optional
<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Your bio</legend>
  <textarea class="$$textarea h-24" placeholder="Bio"></textarea>
  <div class="$$fieldset-label">Optional</div>
</fieldset>
<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Your bio</legend>
  <textarea class="$$textarea h-24" placeholder="Bio"></textarea>
  <div class="$$fieldset-label">Optional</div>
</fieldset>

Textarea colors

<textarea type="text" placeholder="Primary" class="$$textarea $$textarea-primary"></textarea>
<textarea type="text" placeholder="Secondary" class="$$textarea $$textarea-secondary"></textarea>
<textarea type="text" placeholder="Accent" class="$$textarea $$textarea-accent"></textarea>
<textarea type="text" placeholder="Neutral" class="$$textarea $$textarea-neutral"></textarea>
<textarea type="text" placeholder="Info" class="$$textarea $$textarea-info"></textarea>
<textarea type="text" placeholder="Success" class="$$textarea $$textarea-success"></textarea>
<textarea type="text" placeholder="Warning" class="$$textarea $$textarea-warning"></textarea>
<textarea type="text" placeholder="Error" class="$$textarea $$textarea-error"></textarea>
<textarea type="text" placeholder="Primary" class="$$textarea $$textarea-primary"></textarea>
<textarea type="text" placeholder="Secondary" class="$$textarea $$textarea-secondary"></textarea>
<textarea type="text" placeholder="Accent" class="$$textarea $$textarea-accent"></textarea>
<textarea type="text" placeholder="Neutral" class="$$textarea $$textarea-neutral"></textarea>
<textarea type="text" placeholder="Info" class="$$textarea $$textarea-info"></textarea>
<textarea type="text" placeholder="Success" class="$$textarea $$textarea-success"></textarea>
<textarea type="text" placeholder="Warning" class="$$textarea $$textarea-warning"></textarea>
<textarea type="text" placeholder="Error" class="$$textarea $$textarea-error"></textarea>

Sizes

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

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

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

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

<textarea placeholder="Bio" class="$$textarea $$textarea-xl"></textarea>
<textarea placeholder="Bio" class="$$textarea $$textarea-xs"></textarea>

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

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

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

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

Disabled

<textarea class="$$textarea" placeholder="Bio" disabled></textarea>
<textarea class="$$textarea" placeholder="Bio" disabled></textarea>
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details