HTML + CSSCases à cocher

Tampon approuvé

Un tampon encreur rond tombe d'un coup sur la case et reste imprimé légèrement de travers.

Réglages

16px
1x

Code

<label class="uv-csp"><input type="checkbox"><span class="bx"><span class="st" aria-hidden="true"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="24" cy="24" r="21" stroke-width="2.6"/><circle cx="24" cy="24" r="16.5" stroke-width="1.2" stroke-dasharray="2 2.6"/><path d="M15.5 24.5l6 6 11-12.5" stroke-width="4"/></svg></span></span>Vérifié par le contrôle qualité</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

Voir tout : Cases à cocher

Où l’utiliser

Une étape de validation paraît plus définitive avec un geste physique, et cette case la tamponne. Quand on la coche, un sceau rond avec un anneau pointillé et une coche épaisse tombe d'en haut, atterrit un peu tourné et laisse un bref halo d'encre autour de la case. Idéal pour les contrôles qualité, la relecture de documents, les confirmations de livraison et l'accueil des nouveaux salariés.

Le rouge évoque un sceau officiel, le vert une validation, le bleu une signature. Le tampon est décoratif et masqué aux technologies d'assistance ; la case native porte l'état réel.