Case à cocher cadenas
Une icône de cadenas dont l’anse s’ouvre ou se referme : verrouiller a enfin l’air de verrouiller.
Réglages
Code
<label class="uv-ck2l"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path class="sh" d="M8 10V7a4 4 0 0 1 8 0v3"/><rect class="bd" x="5" y="10" width="14" height="10" rx="2.5"/><circle class="kh" cx="12" cy="15" r="1.4" fill="currentColor" stroke="none"/></svg></span>Verrouillage activé</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
Un cadenas en dit plus qu’une coche quand l’option touche à la confidentialité : « Rendre cet album privé » dans une application photo, verrouiller un calque dans un outil de design ou bloquer un tarif lors d’une réservation. Coché, le cadenas se ferme et se colore ; décoché, l’anse s’ouvre. Un bouton de verrouillage en HTML et CSS.
Formulez le libellé comme un état, par exemple « Privé » ou « Verrouillé », et non comme une action : le sens du cadenas fermé sera évident. L’icône est dessinée au trait et reste nette à toutes les tailles.