We've included the TailwindCSS Forms plugin to provide default styling for form fields.
<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>
<input type="file" id="avatar" name="avatar" class="input-file" data-multiple-caption="{count} files selected">
<label for="avatar">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="ady06nxotjh5ud9gmyaee6d0nvk7mryr" class="fill-current icon-sm mr-2"><title id="ady06nxotjh5ud9gmyaee6d0nvk7mryr">Icons/photo</title>
<path d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9l-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>
<span>Upload Avatar</span>
</label>
</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" class="select" 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" class="select" disabled>
<option value="tech" selected>Tech</option>
</select>
</div>
<div class="form-group flex flex-col gap-1">
<div class="flex items-center gap-x-3">
<input type="checkbox" id="checked-checkbox" class="form-checkbox" checked />
<label for="checked-checkbox" class="inline-block">Styled checkbox</label>
</div>
<div class="flex items-center gap-x-3">
<input type="checkbox" id="checkbox" class="form-checkbox" />
<label for="checkbox" class="inline-block">Styled checkbox</label>
</div>
<div class="flex items-center gap-x-3">
<input type="checkbox" id="disabled-checkbox" class="form-checkbox" disabled />
<label for="disabled-checkbox" class="inline-block">Disabled checkbox</label>
</div>
</div>
<div class="form-group flex flex-col gap-1">
<div class="flex items-center gap-x-3">
<input name="radio" type="radio" id="checked-radio" class="form-radio" checked />
<label for="checked-radio" class="inline-block">Styled radio</label>
</div>
<div class="flex items-center gap-x-3">
<input name="radio" type="radio" id="radio" class="form-radio" />
<label for="radio" class="inline-block">Styled radio</label>
</div>
<div class="flex items-center gap-x-3">
<input name="radio" type="radio" id="disabled-radio" class="form-radio" disabled />
<label for="disabled-radio" class="inline-block">Disabled radio</label>
</div>
</div>
<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-white">Update</button>
</div>
</div>
</form><form action="#">
<div class="flex flex-wrap items-center justify-start form-group">
<label for="name" class="lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Name</label>
<input type="text" name="name" class="form-control lg:flex-1">
</div>
<div class="flex flex-wrap items-center justify-start form-group">
<label for="email" class="lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Email</label>
<input type="email" name="email" class="form-control lg:flex-1">
</div>
<div class="flex flex-wrap items-center justify-start 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="flex flex-wrap items-center justify-start form-group">
<span class="label lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Avatar</span>
<div class="w-full lg:flex-1">
<input type="file" id="avatar2" name="avatar2" class="input-file" data-multiple-caption="{count} files selected" multiple>
<label for="avatar2">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="a7152x31chkio2ls2go5i37r271nng4" class="fill-current icon-sm mr-2"><title id="a7152x31chkio2ls2go5i37r271nng4">Icons/photo</title>
<path d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9l-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>
<span>Upload Avatar</span>
</label>
</div>
</div>
<div class="flex flex-wrap items-center justify-start form-group">
<label for="industry" class="label 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="flex flex-wrap items-center justify-start form-group">
<label for="admin" class="label lg:w-1/6 lg:text-right lg:pr-4">Admin</label>
<input type="checkbox" id="admin" class="form-checkbox" />
</div>
<div class="flex flex-wrap items-center justify-start form-group">
<div class="lg:w-1/6 lg:pr-4"></div>
<input type="checkbox" id="admin2" class="form-checkbox mr-2" />
<label for="admin2" class="inline-block mb-0">Member</label>
</div>
</form>We're using stimulus-flatpickr to enable this functionality. You can customize this to whatever you need as it supports everything Flatpickr does.