Input
Input fields allow users to enter text into a form.
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>
<input id="basic" type="text" 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"/>
</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>
<input id="disabled" type="text" 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"/>
</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>
<input id="error" type="text" 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"/>
<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 space-x-2">
<div class="w-full space-y-0.5">
<input id="input-group-1" type="text" 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"/>
</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>
Group with Border
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="relative z-0 flex w-full -space-x-px">
<div class="w-full space-y-0.5">
<input id="input-group-2" type="text" 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 rounded-r-none border-slate-300"/>
</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 rounded-l-none">
<span>Submit</span>
</button>
</div>