Form Controls
A default set styles, layouts and options for form controls.
Basic text input
Basic text input with help text
<div class="max-w-lg mx-auto px-4 py-32 text-gray-900 font-sans">
<label for="example-input" class="block text-gray-600 text-sm">Example text</label>
<input id="example-input" type="text" class="mt-1 w-full" placeholder="Example input">
<div class="mt-1 text-sm text-gray-600">
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
</div>
</div>
Basic text input with error
<div class="max-w-lg mx-auto px-4 py-32 text-gray-900 font-sans">
<label for="example-input" class="block text-gray-600 text-sm">Example text</label>
<input id="example-input" type="text" class="mt-1 w-full" placeholder="Example input">
<div role="alert" class="px-3 py-2 text-xs text-red-900 bg-red-200 rounded-b-sm">
<strong>Error: </strong> Please provide a valid email address.
</div>
</div>
Enclosed text input
<div class="max-w-lg mx-auto px-4 py-32 text-gray-900 font-sans">
<label for="example-input-1" class="inline-block text-gray-600 text-sm">Enclosed input</label>
<div class="mt-1 relative">
<div class="absolute inset-y-0 left-0 ml-4 inline-flex items-center pointer-events-none">
<i data-feather="search" class="w-4 h-4 text-gray-500"></i>
</div>
<input id="example-input-1" type="text" class="block w-full h-full py-3 px-10 border border-gray-600" placeholder="Example input">
<button class="btn-sm absolute inset-y-0 right-0 m-2 px-2 py-2 text-gray-800 bg-gray-200 border-gray-600 hover:bg-gray-300">Go</button>
</div>
</div>
Underlined text input
<div class="max-w-lg mx-auto px-4 py-32 text-gray-900 font-sans">
<label for="example-input-1" class="mb-1 inline-block text-gray-600 text-sm">Underlined input</label>
<div class="relative">
<input id="example-input-1" type="text" class="block w-full py-3 px-1 bg-transparent border-0 border-b border-gray-600 focus:ring-0 focus:border-blue-500" placeholder="Example input">
<button class="btn-sm absolute inset-y-0 right-0 m-2 px-2 py-2 text-gray-800 border-gray-600 hover:bg-gray-200">Go</button>
</div>
</div>
Basic textarea
Basic select input
<div class="max-w-lg mx-auto px-4 py-32 text-gray-900 font-sans">
<label for="example-input" class="block text-gray-600 text-sm">Example select</label>
<select id="example-input" class="mt-1 w-full">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
Basic multi-select
<div class="max-w-lg mx-auto px-4 py-32 text-gray-900 font-sans">
<label for="example-input" class="block text-gray-600 text-sm">Example multi-select</label>
<select id="example-input" class="mt-1 w-full" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
</div>
Basic checkboxes
<div class="max-w-lg mx-auto px-4 py-32 text-gray-900 font-sans">
<div class="flex items-center">
<input id="example-input-1" type="checkbox" class="text-gray-400 focus:ring-offset-0">
<label for="example-input-1" class="ml-3 inline-block text-gray-600 text-sm">Example checkbox</label>
</div>
<div class="mt-2 flex items-center">
<input id="example-input-2" type="checkbox" class="text-gray-400 focus:ring-offset-0">
<label for="example-input-2" class="ml-3 inline-block text-gray-600 text-sm">Example checkbox 2</label>
</div>
</div>
Inline checkboxes
<div class="max-w-lg mx-auto px-4 py-32 text-gray-900 font-sans">
<div class="space-y-2 sm:flex sm:flex-wrap sm:items-start sm:space-y-0 sm:space-x-6">
<div class="flex items-center">
<input id="example-input-1" type="checkbox" class="text-gray-400 focus:ring-offset-0">
<label for="example-input-1" class="ml-3 inline-block text-gray-600 text-sm">Inline checkbox</label>
</div>
<div class="flex items-center">
<input id="example-input-2" type="checkbox" class="text-gray-400 focus:ring-offset-0">
<label for="example-input-2" class="ml-3 inline-block text-gray-600 text-sm">Inline checkbox 2</label>
</div>
<div class="flex items-center">
<input id="example-input-3" type="checkbox" class="text-gray-400 focus:ring-offset-0">
<label for="example-input-3" class="ml-3 inline-block text-gray-600 text-sm">Inline checkbox 3</label>
</div>
</div>
</div>
Basic radio inputs
<div class="max-w-lg mx-auto px-4 py-32 text-gray-900 font-sans">
<div class="flex items-center">
<input id="example-input-1" name="example" type="radio" class="text-gray-400 focus:ring-offset-0">
<label for="example-input-1" class="ml-3 inline-block text-gray-600 text-sm">Example radio</label>
</div>
<div class="mt-2 flex items-center">
<input id="example-input-2" name="example" type="radio" class="text-gray-400 focus:ring-offset-0">
<label for="example-input-2" class="ml-3 inline-block text-gray-600 text-sm">Example radio 2</label>
</div>
</div>
Inline radio inputs
<div class="max-w-lg mx-auto px-4 py-32 text-gray-900 font-sans">
<div class="space-y-2 sm:flex sm:flex-wrap sm:items-start sm:space-y-0 sm:space-x-6">
<div class="inline-flex items-center">
<input id="example-input-1" name="example" type="radio" class="text-gray-400 focus:ring-offset-0">
<label for="example-input-1" class="ml-3 inline-block text-gray-600 text-sm">Inline radio</label>
</div>
<div class="inline-flex items-center">
<input id="example-input-2" name="example" type="radio" class="text-gray-400 focus:ring-offset-0">
<label for="example-input-2" class="ml-3 inline-block text-gray-600 text-sm">Inline radio 2</label>
</div>
<div class="inline-flex items-center">
<input id="example-input-3" name="example" type="radio" class="text-gray-400 focus:ring-offset-0">
<label for="example-input-3" class="ml-3 inline-block text-gray-600 text-sm">Inline radio 3</label>
</div>
</div>
</div>
Basic inline form
<div class="max-w-2xl mx-auto px-4 py-32 text-gray-900 font-sans">
<form action="#" class="space-y-2 sm:space-y-0 sm:space-x-1 sm:flex sm:flex-wrap">
<div class="flex-1 flex flex-col justify-end">
<label for="example-input-1" class="block text-gray-600 text-sm">Email</label>
<input id="example-input-1" type="email" class="mt-1 w-full" placeholder="Email">
</div>
<div class="flex-1 flex flex-col justify-end">
<label for="example-input-2" class="block text-gray-600 text-sm">Password</label>
<input id="example-input-2" type="password" class="mt-1 w-full" placeholder="Password">
</div>
<div class="flex flex-col justify-end">
<button class="btn-sm text-gray-800 bg-white border-gray-600 hover:bg-gray-200 hover:border-gray-400">Submit</button>
</div>
</form>
</div>