Toggle Button
Examples #
Checkbox
Place any checkbox or radio option within an input group’s addon instead of text. We recommend adding .mt-0 to the .form-check-input when there’s no visible text next to the input.
<div class="mr-4 flex items-center">
<input type="checkbox" name="remember"class="w-4 h-4 border border-blue-300 rounded-sm outline-none cursor-pointer" />
<label class="ml-2 text-lg text-gray-600">Checkbox</label>
</div>
<div class="mr-4 flex items-center">
<input type="checkbox" name="remember"class="w-4 h-4 border border-blue-300 rounded-sm outline-none cursor-pointer" checked />
<label class="ml-2 text-lg text-gray-600">Checked</label>
</div>
Disabled Checkbox
Add the disabled attribute and the associated <label>
are automatically styled to match with a lighter color to help indicate the input's state.
<div class="mr-4 flex items-center">
<input type="checkbox" name="remember" class="w-4 h-4 border border-blue-300 rounded-sm outline-none cursor-pointer" disabled />
<label class="ml-2 text-lg text-gray-600">Disabled</label>
</div>
<div class="mr-4 flex items-center">
<input type="checkbox" name="remember" class="w-4 h-4 border border-blue-300 rounded-sm outline-none cursor-pointer" checked disabled />
<label class="ml-2 text-lg text-gray-600">Disabled Checked</label>
</div>
Radio
<div class="mr-4 flex items-center">
<input name="select" type="radio" class="w-4 h-4 border border-gray-300 rounded-full outline-none cursor-pointer" value="male" unchecked />
<label class="ml-2 text-lg text-gray-600" for="male">Default radio</label>
</div>
<div class="mr-4 flex items-center">
<input name="select" type="radio" class="w-4 h-4 border border-gray-300 rounded-full outline-none cursor-pointer" value="male" checked />
<label class="ml-2 text-lg text-gray-600" for="male">Default Checked radio</label>
</div>
Add the disabled attribute and the associated <label> are automatically styled to match with a lighter color to
help indicate the input's state.
<div class="flex items-center">
<input type="radio" name="radios" class="w-4 h-4 mr-2" id="disabledRadio1" disabled>
<label class="text-gray-400" for="disabledRadio1">Disabled radio</label>
</div>
<div class="flex items-center mb-3">
<input type="radio" name="radios" class="w-4 h-4 mr-2" id="disabledRadio2" disabled checked>
<label class="text-gray-400" for="disabledRadio2">Disabled checked radio</label>
</div>
A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.
<label class="flex items-center cursor-pointer">
<div class="relative">
<input id="toogleButton" checked="" type="checkbox" class="hidden">
<div class="toggle-path bg-gray-200 w-9 h-5 rounded-full shadow-inner"></div>
<div class="toggle-circle absolute w-3.5 h-3.5 bg-white rounded-full shadow inset-y-0 left-0">
</div>
</div>
<div class="ml-2 text-lg text-gray-600">
Default switch checkbox input
</div>
</label>
A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.
<div class="flex items-center mb-1">
<button class="flex items-center h-5 mr-2 transition duration-300 bg-blue-100 border shadow top-5 right-5 w-9 rounded-2xl focus:outline-none"
type="checkbox" disabled>
<div class="w-1 h-1 p-2 text-white transition duration-500 bg-white border rounded-full md:w-2 md:h-2"></div>
</button>
<label class="text-gray-400 form-check-label" for="disabledSwitchCheckChecked2"> Disabled switch checkbox input</label>
</div>
<div class="flex items-center mb-4">
<button class="flex items-center h-5 mr-2 transition duration-300 bg-blue-100 border shadow top-5 right-5 w-9 rounded-2xl focus:outline-none"
type="checkbox" disabled>
<div class="w-1 h-1 p-2 ml-6 text-white transition duration-500 transform -translate-x-2 bg-white border border-blue-400 rounded-full md:w-2 md:h-2"></div>
</button>
<label class="text-gray-400 form-check-label" for="disabledSwitchCheckChecked2"> Disabled Checked switch checkbox input</label>
</div>