Custom Checkbox and Radio Buttons in Tailwind
Tailwind CSS makes it easy to customize checkboxes and radio buttons while maintaining accessibility and design consistency.
1. Native Checkbox and Radio Styling
Apply padding, spacing, and custom styles directly to labels for styling:
<label class="inline-flex items-center space-x-2">
<input type="checkbox" class="form-checkbox text-blue-600">
<span>Subscribe</span>
</label>
<label class="inline-flex items-center space-x-2">
<input type="radio" name="plan" class="form-radio text-green-600">
<span>Basic Plan</span>
</label>
2. Fully Custom Checkbox Example
You can visually hide the native input and style a custom span:
<label class="inline-flex items-center cursor-pointer space-x-2">
<input type="checkbox" class="sr-only peer">
<div class="w-5 h-5 rounded border-2 border-gray-400 peer-checked:bg-blue-600 peer-checked:border-blue-600"></div>
<span>Accept Terms</span>
</label>
3. Fully Custom Radio Button
Use the same strategy for radio buttons using Tailwind’s peer and custom divs:
<label class="inline-flex items-center cursor-pointer space-x-2">
<input type="radio" name="choice" class="sr-only peer">
<div class="w-5 h-5 rounded-full border-2 border-gray-400 peer-checked:border-blue-600 peer-checked:bg-blue-600"></div>
<span>Option A</span>
</label>
4. Tip: Use the Tailwind Forms Plugin
Tailwind’s official @tailwindcss/forms plugin provides minimal, cross-browser form styling to make checkboxes and radios look more consistent.
// Install the plugin
npm install -D @tailwindcss/forms
// tailwind.config.js
plugins: [
require('@tailwindcss/forms'),
],
Conclusion
Whether you use native styles, the Tailwind Forms plugin, or fully custom styles with peer, Tailwind CSS gives you full control over form elements like checkboxes and radios.