HTML + CSSCheckboxes
8-bit checkbox
A pixel art box with a chunky outline where the check appears square by square.
Settings
16px
1x
Code
<label class="uv-c8b"><input type="checkbox"><span class="bx"><b style="--x:1;--y:4;--i:0"></b><b style="--x:1;--y:5;--i:0"></b><b style="--x:2;--y:5;--i:1"></b><b style="--x:2;--y:6;--i:1"></b><b style="--x:3;--y:6;--i:2"></b><b style="--x:3;--y:7;--i:2"></b><b style="--x:4;--y:5;--i:3"></b><b style="--x:4;--y:6;--i:3"></b><b style="--x:5;--y:4;--i:4"></b><b style="--x:5;--y:5;--i:4"></b><b style="--x:6;--y:3;--i:5"></b><b style="--x:6;--y:4;--i:5"></b><b style="--x:7;--y:2;--i:6"></b><b style="--x:7;--y:3;--i:6"></b></span>Save game</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
See all CheckboxesWhere to use it
Built entirely with CSS boxes and box shadows, this checkbox recreates the menus of handheld consoles: a thick stepped outline, a bevel inside the box and a check drawn from fourteen pixels that switch on in quick sequence. The label uses a monospaced system font to complete the arcade look.
It suits game settings, retro portfolios, coding bootcamps and playful to-do lists. The pixel size follows the size control, so it stays crisp from small to large, and the two colors set the fill and the highlighted pixels.