Tailwind CSS
/Intermediate
Checkbox & Radio Buttons
Definition
The specific techniques required to style HTML checkboxes and radio buttons, which are notoriously difficult to manipulate using standard CSS.
Explain Like I'm New
You cannot easily change the color of a default browser checkbox just by applying `bg-blue-500`. To customize them, you usually have to hide the real checkbox (`sr-only`), and draw a fake box using Tailwind that reacts to the `peer-checked:` state of the hidden input.
Real World Example
Creating a massive, clickable 'Plan Selection' card where clicking anywhere on the card selects the hidden radio button inside it.
Common Use Cases
- •Pricing tables
- •Custom forms
- •Settings toggles
Interactive Example
Interview Questions
basic
- Can you simply apply `bg-red-500` to a `<input type="checkbox">` to make the checkmark red?
intermediate
- What is the easiest way to perfectly style checkboxes without writing complex `peer` logic?