Mailbox flag checkbox
A post mailbox whose red flag springs up when checked while a letter peeks out of the door.
Settings
Code
<label class="uvq02-mbx"><input type="checkbox"><span class="bx"><svg viewBox="0 0 56 48" aria-hidden="true"><ellipse class="gd" cx="27" cy="46.5" rx="14" ry="1.5"/><rect class="po" x="24" y="29" width="6" height="18" rx="1"/><g class="lt"><rect x="3" y="19.5" width="10" height="7" rx="1"/><path d="M3.5 20l4.5 3.6L12.5 20"/></g><path class="bo" d="M8 30V20a10 10 0 0 1 10-10h20a10 10 0 0 1 10 10v10z"/><path class="dr" d="M14.5 30V20a6.5 6.5 0 0 1 3.5-5.8"/><rect class="sh" x="8" y="28" width="40" height="2"/><g class="fl"><rect class="pl" x="41" y="7" width="2" height="15" rx="1"/><path class="fg" d="M43 7h8.5l-1.6 3 1.6 3H43z"/><circle class="pv" cx="42" cy="22" r="1.7"/></g></svg></span>Letters to send</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
Inspired by roadside post mailboxes, this checkbox is a small inline SVG with a rounded box, a wooden post and a red flag on the side. Checking it raises the flag with a springy overshoot and slides a letter halfway out of the door, the old signal that there is mail to collect. Hovering nudges the flag. It fits messaging apps, newsletters, outbox settings and delivery tools.
The main color is the flag and the secondary color the mailbox, so a classic red on steel blue or a brand pairing both work. The label next to it should describe the pending action, such as sending or collecting mail.