Textarea
An text component for multi-line text input.
Basic
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="w-full space-y-0.5">
<label for="basic" class="text-xs font-medium text-slate-500">Your Name</label>
<textarea id="basic" placeholder="Enter your name" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 undefined border-slate-300">
</textarea>
</div>
Disabled
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="w-full space-y-0.5">
<label for="disabled" class="text-xs font-medium text-slate-500">Your Name</label>
<textarea id="disabled" placeholder="Enter your name" disabled="" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 undefined border-slate-300">
</textarea>
</div>
Error
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="w-full space-y-0.5">
<label for="error" class="text-xs font-medium text-slate-500">Your Name</label>
<textarea id="error" placeholder="Enter your name" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 undefined border-red-600 ring-1 ring-red-600">
</textarea>
<p class="pt-1 text-xs font-medium text-red-600">This field is required</p>
</div>
This field is required
Group with Space
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="flex w-full items-start space-x-2">
<div class="w-full space-y-0.5">
<textarea id="input-group-1" placeholder="Enter your name" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 undefined border-slate-300">
</textarea>
</div>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md">
<span>Submit</span>
</button>
</div>
With Avatar
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/580"/>
<div class="flex w-full items-start space-x-2">
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-8 w-8 text-xs rounded-full false">
<img src="https://source.boringavatars.com/beam/580" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
</div>
<div class="w-full space-y-0.5">
<textarea id="input-group-2" placeholder="Enter your name" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 undefined border-slate-300">
</textarea>
</div>
</div>