Radio-Karten mit Icon
Jede Option ist eine kleine Karte mit Icon. Die gewählte hebt sich an und ihr Rand leuchtet auf.
Einstellungen
Code
<div class="uv-rdc"><label><input type="radio" name="rdc" checked><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg><b>Zuhause</b></span></label><label><input type="radio" name="rdc"><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h18v12H3zM8 7V4h8v3"/></svg><b>Büro</b></span></label><label><input type="radio" name="rdc"><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 7v9H3v-9z M9 19v-5h6v5"/></svg><b>Laden</b></span></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
Karten machen eine Auswahl greifbar, wenn man sich jede Option bildlich vorstellen kann. Ein Reinigungsdienst fragt, welche Art von Räumen du hast, ein Lieferformular nach der Adressart, ein Rechner für die Hausratversicherung nach dem Objekt: Haus, Büro oder Laden, jeweils mit eigenem Icon. Radio-Karten in HTML und CSS, auch am Handy leicht zu treffen.
Die Icons erledigen hier die halbe Arbeit, also nimm welche, die die Optionen klar unterscheiden. Drei oder vier Karten passen in eine Reihe. Bei mehr lieber umbrechen lassen, statt sie zu verkleinern.