Punched ticket checkbox

A train ticket where checking the stub punches a clean hole and the paper disc falls away.

Settings

Main color#d8452e

Secondary color#f3ead6

Size16px

Speed1x

Text

Code

index.html

<label class="uvq02-tkt"><input type="checkbox"><span class="pz" aria-hidden="true"><i class="tg"></i><i class="hl"></i><i class="ch"></i></span><span class="bd"><small aria-hidden="true">MAD → LIS · 08:45</small><b>Validate ticket</b><i class="bc" aria-hidden="true"></i></span></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

Self-drawing checkbox

CheckboxesHTML + CSS

Round fill checkbox

CheckboxesHTML + CSS

Confetti burst checkbox

CheckboxesHTML + CSS

Strikethrough task item

CheckboxesHTML + CSS

3D flip checkbox

CheckboxesHTML + CSS

Heart like button

CheckboxesHTML + CSS

Bouncy drawn checkbox

CheckboxesHTML + CSS

Circle fill checkbox

CheckboxesHTML + CSS

Where to use it

This checkbox is drawn as a paper train ticket with a perforated stub, a route line and a small barcode. Checking it punches a hole through the stub while the cut paper circle tumbles down and fades. It is plain HTML and CSS around a real checkbox, so it suits ticket validation, event check-in, boarding steps and travel apps.

The main color sets the punch guide and the validated label, the secondary color is the paper tone. Change the route text to your own codes, and line several tickets up in a column for multi-leg trips or group bookings.