Pencil answer sheet radio
A multiple choice exam question: when you pick an answer, a pencil scribble fills its oval.
Settings
Code
<fieldset class="uvq04-omr"><legend>7. Which gas do plants absorb?</legend><label><input type="radio" name="uvq04-omr"><span class="bb" aria-hidden="true">A<svg viewBox="0 0 24 24" preserveAspectRatio="none"><path pathLength="1" d="M6.5 8.5L17 6.5L5.5 12.5L18.5 10L6 16L18 14L8.5 18"/></svg></span><span class="tx">Oxygen</span></label><label><input type="radio" name="uvq04-omr" checked><span class="bb" aria-hidden="true">B<svg viewBox="0 0 24 24" preserveAspectRatio="none"><path pathLength="1" d="M6.5 8.5L17 6.5L5.5 12.5L18.5 10L6 16L18 14L8.5 18"/></svg></span><span class="tx">Carbon dioxide</span></label><label><input type="radio" name="uvq04-omr"><span class="bb" aria-hidden="true">C<svg viewBox="0 0 24 24" preserveAspectRatio="none"><path pathLength="1" d="M6.5 8.5L17 6.5L5.5 12.5L18.5 10L6 16L18 14L8.5 18"/></svg></span><span class="tx">Nitrogen</span></label><label><input type="radio" name="uvq04-omr"><span class="bb" aria-hidden="true">D<svg viewBox="0 0 24 24" preserveAspectRatio="none"><path pathLength="1" d="M6.5 8.5L17 6.5L5.5 12.5L18.5 10L6 16L18 14L8.5 18"/></svg></span><span class="tx">Helium</span></label><p class="nt">Fill the oval completely</p></fieldset>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 Radio buttons
See all Radio buttonsWhere to use it
This radio group looks like an optical answer sheet: salmon printed ovals, timing marks down the margin, faint ruled lines and a serif question. Picking an answer draws a graphite scribble inside the oval with an SVG stroke, and picking another one erases it. It suits quizzes, school platforms, surveys and onboarding questions that want a tactile, offline feel.
The main color is the pencil and the secondary color is the printed ink of the sheet. Change the question through the text field and keep answers to one line; four or five options fit the card without scrolling.