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
textarea-xs
Size
Extra small size
textarea-sm
Size
Small size
textarea-md
Size
Medium size [Default]
textarea-lg
Size
Large size
textarea-xl
Size
Extra large size

Textarea

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

Ghost (no background)

<textarea class="textarea textarea-ghost" placeholder="Bio"></textarea>
<textarea className="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="label">Optional</div>
</fieldset>
<fieldset className="fieldset">
  <legend className="fieldset-legend">Your bio</legend>
  <textarea className="textarea h-24" placeholder="Bio"></textarea>
  <div className="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" className="textarea textarea-primary"></textarea>
<textarea type="text" placeholder="Secondary" className="textarea textarea-secondary"></textarea>
<textarea type="text" placeholder="Accent" className="textarea textarea-accent"></textarea>
<textarea type="text" placeholder="Neutral" className="textarea textarea-neutral"></textarea>
<textarea type="text" placeholder="Info" className="textarea textarea-info"></textarea>
<textarea type="text" placeholder="Success" className="textarea textarea-success"></textarea>
<textarea type="text" placeholder="Warning" className="textarea textarea-warning"></textarea>
<textarea type="text" placeholder="Error" className="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" className="textarea textarea-xs"></textarea>

<textarea placeholder="Bio" className="textarea textarea-sm"></textarea>

<textarea placeholder="Bio" className="textarea textarea-md"></textarea>

<textarea placeholder="Bio" className="textarea textarea-lg"></textarea>

<textarea placeholder="Bio" className="textarea textarea-xl"></textarea>

Disabled

<textarea class="textarea" placeholder="Bio" disabled></textarea>
<textarea className="textarea" placeholder="Bio" disabled></textarea>
Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details
Please upgrade your browser