HTML + CSSCheckboxen
Ring, der sich füllt
Der runde Rand wird nach innen dicker, bis ein voller Punkt entsteht, und darin taucht ein Häkchen auf.
Einstellungen
16px
1x
Code
<label class="uv-ck2m"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Newsletter abonnieren</label>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 Checkboxen
Wofür du ihn nutzen kannst
Der Ring, der sich schließt, wirkt weich und rund und passt zu freundlichen Opt-ins: „Newsletter abonnieren“ am Ende des Checkouts, „Erinnere mich“ auf einer Event-Seite oder der Eintrag in eine Warteliste. Diese runde Checkbox in CSS kommt ganz ohne Ecken aus und fügt sich deshalb gut in verspielte, runde Oberflächen ein.
Runde Checkboxen hält man leicht für Radio-Buttons. Misch sie deshalb nicht im selben Formular mit Radios und formulier das Label so, dass klar ist, dass man mehrere Optionen wählen kann.