Styling Checkboxes & Radio Buttons: Accent Color

The accent-{color}-{shade} utility (e.g., accent-pink-500 ) changes the color of the browser's default checkboxes and radio buttons when they are checked. This is the simplest way to add a bit of brand color.

Checkboxes with Accent Color

Blue Accent Pink Accent Teal Accent (Unchecked)

Radio Buttons with Accent Color

Purple Accent Green Accent Orange Accent

Note: The accent-color property styles the active part of the control (the checkmark/dot and sometimes the border when focused or checked, depending on the browser). The overall shape and size are still largely browser-defined.