Hängende Größenetiketten
Etiketten aus Kraftpapier an einer Kordel: Die gewählte Größe färbt sich rot und schwingt kurz hin und her.
Einstellungen
Code
<fieldset class="uvq04-tag"><legend>Größe</legend><div class="rp"><i class="cd" aria-hidden="true"></i><label><input type="radio" name="uvq04-tag" disabled><span class="tg"><b>XS</b></span></label><label><input type="radio" name="uvq04-tag"><span class="tg"><b>S</b></span></label><label><input type="radio" name="uvq04-tag" checked><span class="tg"><b>M</b></span></label><label><input type="radio" name="uvq04-tag"><span class="tg"><b>L</b></span></label><label><input type="radio" name="uvq04-tag"><span class="tg"><b>XL</b></span></label></div><p class="nt">XS ist ausverkauft</p></fieldset>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
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Kleidergrößen werden zu Etiketten aus Kraftpapier an einer leicht durchhängenden Kordel, jedes mit Öse und kräftigem Buchstaben. Beim Hover neigt sich ein Etikett, beim Wählen wird es rot und schwingt wie ein gedämpftes Pendel aus, während ausverkaufte Größen verblassen und durchgestrichen sind. Bringt Ladenflair in Modeshops, Merch-Seiten und Produktkonfiguratoren.
Die Hauptfarbe ist das gewählte Etikett, die Zweitfarbe die Kordel. Deaktivierte Inputs bilden den Bestand ab: Setze oder entferne disabled pro Größe und halte den Hinweis darunter aktuell, damit klar ist, warum ein Etikett grau ist.