Forms
We've included the TailwindCSS Forms plugin to provide default styling for form fields.
Block Layout
<form action="#">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" placeholder="Johnny Knoxville">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="name">Disabled</label>
<input type="text" name="name" class="form-control" placeholder="Johnny Knoxville" disabled>
</div>
<div class="form-group">
<label for="name">Readonly</label>
<input type="text" name="name" class="form-control" placeholder="Johnny Knoxville" readonly>
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="url" name="website" class="form-control error" value="My Website">
<p class="form-hint error">Please enter a valid URL</p>
</div>
<div class="form-group">
<p class="label">Example avatar upload</p>
<div class="file-input-group">
<p class="label">
Avatar
</p>
<label for="avatar" class="btn btn-tertiary">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1">
<path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z" clip-rule="evenodd" />
</svg>
<span>Upload Avatar</span>
</label>
<input type="file" id="avatar" name="avatar" data-multiple-caption="{count} files selected">
</div>
</div>
<div class="form-group">
<label for="industry">Industry</label>
<select name="industry" class="select">
<option value="" selected>Choose an industry</option>
<option value="tech">Tech</option>
<option value="marketing">Marketing</option>
<option value="health_science">Health & Science</option>
</select>
</div>
<div class="form-group">
<label for="industries">Industries</label>
<select name="industries" multiple>
<option value="" selected>Choose an industry</option>
<option value="tech">Tech</option>
<option value="marketing">Marketing</option>
<option value="health_science">Health & Science</option>
</select>
</div>
<div class="form-group">
<label for="industry">Industry (Disabled)</label>
<select name="industry" disabled>
<option value="tech" selected>Tech</option>
</select>
</div>
</form>Checkboxes
<form action="#" class="space-y-4">
<fieldset>
<legend class="text-sm font-bold">Checked and Unchecked</legend>
<div class="form-picker-group">
<input type="checkbox" id="checkbox-1" checked>
<label for="checkbox-1">Styled checkbox</label>
</div>
<div class="form-picker-group">
<input type="checkbox" id="checkbox-2">
<label for="checkbox-2">Styled checkbox</label>
</div>
</fieldset>
<fieldset>
<legend class="text-sm font-bold">Disabled</legend>
<div class="form-picker-group">
<input type="checkbox" id="checkbox-3" disabled>
<label for="checkbox-3">Disabled checkbox</label>
</div>
</fieldset>
<fieldset>
<legend class="text-sm font-bold">Checked and Disabled</legend>
<div class="form-picker-group">
<input type="checkbox" id="checkbox-4" checked disabled>
<label for="checkbox-4">Styled checkbox</label>
</div>
</fieldset>
<fieldset>
<legend class="text-sm font-bold">With Hint Text</legend>
<div class="form-picker-group">
<input type="checkbox" id="checkbox-5">
<div>
<label for="checkbox-5">Label text</label>
<p class="form-hint">Hint text</p>
</div>
</div>
</fieldset>
<fieldset>
<legend class="text-sm font-bold">Labels First</legend>
<div class="form-picker-group">
<label for="checkbox-6">Styled checkbox</label>
<input type="checkbox" id="checkbox-6">
</div>
<div class="form-picker-group">
<div>
<label for="checkbox-7">Label text</label>
<p class="form-hint">Hint text</p>
</div>
<input type="checkbox" id="checkbox-7">
</div>
</fieldset>
</form>Switches/Toggles
<form action="#" class="space-y-4">
<fieldset class="space-y-2">
<legend class="text-sm font-bold">Checked and Unchecked</legend>
<div class="form-picker-group switch">
<input type="checkbox" id="switch-checkbox-1" checked>
<label for="switch-checkbox-1">Toggle switch</label>
</div>
<div class="form-picker-group switch">
<input type="checkbox" id="switch-checkbox-2">
<label for="switch-checkbox-2">Toggle switch</label>
</div>
</fieldset>
<fieldset class="space-y-2">
<legend class="text-sm font-bold">Disabled</legend>
<div class="form-picker-group switch">
<input type="checkbox" id="switch-checkbox-3" disabled>
<label for="switch-checkbox-3">Toggle switch</label>
</div>
</fieldset>
<fieldset class="space-y-2">
<legend class="text-sm font-bold">Checked and Disabled</legend>
<div class="form-picker-group switch">
<input type="checkbox" id="switch-checkbox-4" checked disabled>
<label for="switch-checkbox-4">Toggle switch</label>
</div>
</fieldset>
<fieldset class="space-y-2">
<legend class="text-sm font-bold">With Hint Text</legend>
<div class="form-picker-group switch">
<input type="checkbox" id="switch-checkbox-5">
<div>
<label for="switch-checkbox-5">Toggle switch</label>
<p class="form-hint">Hint text</p>
</div>
</div>
</fieldset>
<fieldset class="space-y-2">
<legend class="text-sm font-bold">Labels First</legend>
<div class="form-picker-group switch-right">
<label for="switch-checkbox-6">Toggle switch</label>
<input type="checkbox" id="switch-checkbox-6">
</div>
<div class="form-picker-group switch-right">
<div>
<label for="switch-checkbox-7">Toggle switch</label>
<p class="form-hint">Hint text</p>
</div>
<input type="checkbox" id="switch-checkbox-7">
</div>
</fieldset>
</form>Radio Buttons
<form action="#" class="space-y-4">
<fieldset class="space-y-2">
<legend class="text-sm font-bold">Checked and Unchecked</legend>
<div class="form-picker-group">
<input name="radio-default" type="radio" id="radio-checked" checked>
<label for="radio-checked">Label text</label>
</div>
<div class="form-picker-group">
<input name="radio-default" type="radio" id="radio">
<label for="radio">Label text</label>
</div>
</fieldset>
<fieldset class="space-y-2">
<legend class="text-sm font-bold">Disabled</legend>
<div class="form-picker-group">
<input name="radio-disabled" type="radio" id="disabled-radio" disabled>
<label for="disabled-radio">Disabled radio</label>
</div>
</fieldset>
<fieldset class="space-y-2">
<legend class="text-sm font-bold">Checked and Disabled</legend>
<div class="form-picker-group">
<input name="radio-disabled" type="radio" id="radio-checked-disabled" checked disabled>
<label for="radio-checked-disabled">Label text</label>
</div>
</fieldset>
<fieldset class="space-y-2">
<legend class="text-sm font-bold">With Hint Text</legend>
<div class="form-picker-group">
<input name="radio" type="radio" id="checked-radio">
<div>
<label for="checked-radio">Label text</label>
<p class="form-hint">Hint text</p>
</div>
</div>
</fieldset>
<fieldset class="space-y-2">
<legend class="text-sm font-bold">Labels First</legend>
<div class="form-picker-group">
<label for="radio-label-first-1">Label text</label>
<input name="radio-label-first" type="radio" id="radio-label-first-1">
</div>
<div class="form-picker-group">
<div>
<label for="radio-label-first-2">Label text</label>
<p class="form-hint">Hint text</p>
</div>
<input name="radio-label-first" type="radio" id="radio-label-first-2">
</div>
</fieldset>
</form><form action="#">
<div class="form-group">
<label for="inline-email">Inline control with button</label>
<div class="flex gap-2">
<input type="email" name="inline-email" class="form-control w-64" placeholder="steve@jobs.com">
<button name="button" type="submit" class="btn btn-secondary">Update</button>
</div>
</div>
</form>Inline Layout
<form action="#" class="inline">
<div class="form-group">
<label for="name" class="lg:w-1/6 lg:text-right lg:pr-4">Name</label>
<input type="text" name="name" class="form-control lg:flex-1">
</div>
<div class="form-group">
<label for="email" class="lg:w-1/6 lg:text-right lg:pr-4">Email</label>
<input type="email" name="email" class="form-control lg:flex-1">
</div>
<div class="form-group">
<label for="website" class="lg:w-1/6 lg:text-right lg:pr-4 lg:-mt-4">Website</label>
<div class="w-full lg:flex-1">
<input type="url" name="website" class="form-control error" value="My Website">
<p class="w-full form-hint error">Please enter a valid URL</p>
</div>
</div>
<div class="file-input-group">
<p class="label lg:w-1/6 lg:text-right lg:pr-4">
Avatar
</p>
<label for="avatar-inline" class="btn btn-tertiary">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1">
<path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z" clip-rule="evenodd" />
</svg>
<span>Upload Avatar</span>
</label>
<input type="file" id="avatar-inline" name="avatar-inline" data-multiple-caption="{count} files selected">
</div>
<div class="flex flex-wrap items-center justify-start form-group">
<label for="industry" class="lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Industry</label>
<div class="relative w-full lg:flex-1">
<select name="industry" class="select">
<option value="" selected>Choose an industry</option>
<option value="tech">Tech</option>
<option value="marketing">Marketing</option>
<option value="health_science">Health & Science</option>
</select>
</div>
</div>
<p class="mb-4 text-gray-700 dark:text-gray-200 text-sm">
Checkboxes labels can be either on the left or right.
</p>
<div class="form-picker-group">
<label for="admin" class="lg:w-1/6 lg:text-right">Admin</label>
<input type="checkbox" id="admin">
</div>
<div class="form-picker-group">
<div class="lg:w-1/6"></div>
<input type="checkbox" id="admin2">
<label for="admin2">Member</label>
</div>
<div class="form-picker-group switch">
<div class="lg:w-1/6 lg:pr-4"></div>
<input type="checkbox" id="inline-switch">
<label for="inline-switch">Member</label>
</div>
</form>