HTML + CSSCheckboxes
Checkbox con candado
Un icono de candado cuyo arco se abre o se cierra, para que bloquear algo se vea de verdad.
Ajustes
16px
1x
Código
<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>Bloqueo activado</label>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Checkboxes
Dónde usarlo
Un candado dice más que un check cuando la opción va de privacidad: «Hacer privado este álbum» en una app de fotos, bloquear una capa en una herramienta de diseño o congelar un precio en una reserva. Marcado, el candado se cierra y se llena de color; desmarcado, el arco se abre. Un toggle de bloqueo en HTML y CSS.
Escribe la etiqueta como un estado, tipo «Privado» o «Bloqueado», no como una acción, para que no haya dudas sobre qué significa el candado cerrado. El icono está hecho con trazos y se ve nítido a cualquier tamaño.