Radio mit gezeichnetem Ring
Ein Ring zeichnet sich um die gewählte Option, direkt danach füllt sich der Punkt in der Mitte.
Einstellungen
Code
<div class="uv-rdr"><label><input type="radio" name="rdr"><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Standard</label><label><input type="radio" name="rdr" checked><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Schnell</label><label><input type="radio" name="rdr"><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Dringend</label></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Radiobuttons
Wofür du ihn nutzen kannst
Der Ring um die Option erinnert daran, eine Antwort mit dem Stift einzukreisen. Das passt zu Entscheidungen rund um Tempo oder Dringlichkeit: Standard-, Express- oder Sofortversand im Checkout, die Lieferzeit einer Online-Druckerei oder die Priorität eines Support-Tickets. Ein Radio-Button mit SVG-Ring in HTML und CSS.
Die zwei Schritte, erst Ring, dann Punkt, dauern etwa eine halbe Sekunde. Bei drei oder vier Optionen ist das gut, in langen Listen wirkt es träge. Schreib Lieferzeit oder Preis direkt dazu, das erleichtert die Wahl.