Hand-circled yes or no toggle
A question and two words on a notepad: a marker draws a loose loop around the chosen answer.
Settings
Code
<label class="uvq03-skt"><input type="checkbox" role="switch"><span class="q">Get the newsletter?</span><span class="nb"><span class="o y">Yes<svg viewBox="0 0 60 36" aria-hidden="true"><path d="M44 6C30 1 8 4 5 16c-3 12 18 17 33 15 14-2 20-10 15-18C49 6 36 4 26 6" pathLength="1"/></svg></span><span class="o n">No<svg viewBox="0 0 60 36" aria-hidden="true"><path d="M16 5C30 1 54 5 55 17c1 11-20 16-34 13C8 27 2 20 7 12c4-6 16-8 28-7" pathLength="1"/></svg></span></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.
More in Toggles
See all TogglesWhere to use it
Here the switch is a scrap of lined notepad with Yes and No written in a handwriting font. The current answer is circled with a loose red marker loop that draws itself, while the other loop wipes away, so the choice reads like a note on paper. The loops are SVG paths animated with stroke-dashoffset. It suits surveys, newsletter opt-ins, quizzes and friendly forms.
The main color is the marker and the second one is the ruled lines. Change the question in the text field and keep it short; the handwriting font comes from the system, so it varies a little between devices.