Talla

La XS está agotada

HTML + CSSBoutons radio

Étiquettes de taille suspendues

Des étiquettes en papier kraft suspendues à une ficelle : la taille choisie devient rouge et se balance un instant.

Réglages

16px
1x

Code

<fieldset class="uvq04-tag"><legend>Taille</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">Le XS est épuisé</p></fieldset>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Boutons radio

Voir tout : Boutons radio

Où l’utiliser

Les tailles de vêtement deviennent des étiquettes en papier kraft enfilées sur une ficelle un peu détendue, chacune avec son œillet et une lettre épaisse. Au survol, l'étiquette penche ; une fois choisie, elle devient rouge et se balance comme un pendule qui s'amortit, tandis que les tailles épuisées pâlissent, barrées. Une touche de boutique artisanale pour la mode et le merch.

La couleur principale colore l'étiquette choisie et la secondaire la ficelle. Les inputs désactivés gèrent le stock : ajoute ou retire l'attribut disabled pour chaque taille et mets à jour la note du dessous pour expliquer pourquoi une étiquette est grisée.