Skip to content
Early Access

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>
avatar