HTML + CSSCheckboxes

3D flip checkbox

The box turns over in 3D when checked and shows a green back face with a white tick.

Settings

16px
1x

Code

<label class="uv-c3"><input type="checkbox"><span><b></b><b><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></b></span>Turn on</label>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Checkboxes

Where to use it

A flipping checkbox makes a simple yes feel like a small event. Use it for “Activate” next to a feature in account settings, for confirming attendance in an event RSVP or for enabling add-ons in a subscription builder. The box turns on its vertical axis like a playing card and lands on its green side.

The back face is always green, the color most people read as “OK”, so it does not follow your main color. If your brand clashes with that green, choose another checkbox. The flip lasts over half a second, which suits a few important options better than a long list.