HTML + CSSCases à cocher
Anneau qui se remplit
Le contour rond s’épaissit vers l’intérieur jusqu’à devenir un point plein, puis une coche apparaît.
Réglages
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>M’abonner</label>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.
Plus dans Cases à cocher
Où l’utiliser
L’anneau qui se referme sur lui-même a quelque chose de doux et de rond, idéal pour les inscriptions sympathiques : « S’abonner à la newsletter » à la fin d’un paiement, « Me prévenir » sur la page d’un événement ou l’inscription à une liste d’attente. Cette case à cocher ronde en CSS n’a aucun angle et se fond dans les interfaces arrondies.
Une case ronde peut être prise pour un bouton radio. Ne la mélangez pas avec des radios dans le même formulaire, et rédigez un libellé clair pour montrer qu’on peut en cocher plusieurs.