HTML + CSSCheckboxes

Rolling pin checkbox

On a floured wooden board, the rolling pin rolls across and flattens the ball of dough into a sheet.

Settings

16px
1x

Code

<label class="uvq02-rol"><input type="checkbox"><span class="bd" aria-hidden="true"><i class="dg"></i><span class="pn"></span><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span></span>Roll out the dough</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.

Markdown version with all the code, for AI assistants

More in Checkboxes

See all Checkboxes

Where to use it

This checkbox is a floured wooden chopping board with a ball of dough in the middle and a rolling pin resting on one side. Checking it rolls the pin across the board, with its grain turning as it moves, flattens the dough into a wide uneven sheet and pops a small tick badge in the corner. It fits baking apps and pizza recipes.

The main color is the tick badge and the secondary color the dough, so you can go from pale pastry to wholemeal or a green spinach dough. Keep the label as a clear action, like a recipe step.