Handgekreistes Ja oder Nein
Eine Frage und zwei Wörter auf einem Notizblock: Ein Marker zieht einen lockeren Kreis um die gewählte Antwort.
Einstellungen
Code
<label class="uvq03-skt"><input type="checkbox" role="switch"><span class="q">Newsletter erhalten?</span><span class="nb"><span class="o y">Ja<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">Nein<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 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 Schalter
Alle ansehen: SchalterWofür du ihn nutzen kannst
Hier ist der Schalter ein Stück linierter Notizblock, auf dem Ja und Nein in einer Handschrift stehen. Die aktuelle Antwort wird von einem lockeren roten Markerkreis umrandet, der sich selbst zeichnet, während der andere verschwindet, sodass die Wahl wie eine Notiz auf Papier wirkt. Die Kreise sind SVG-Pfade mit stroke-dashoffset. Passt zu Umfragen, Newsletter-Anmeldungen, Quizzen und freundlichen Formularen.
Die Hauptfarbe ist der Marker, die zweite die Linien. Ändere die Frage im Textfeld und halte sie kurz; die Handschrift kommt vom System und sieht deshalb je nach Gerät etwas anders aus.