HTML + CSSCheckboxes
Ojo que se abre
Un ojo cerrado con pestañas que se abre y mira a los lados cuando activas la opción.
Ajustes
16px
1x
Código
<label class="uv-cey"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><g class="sh"><path d="M3 11c2.5 3.2 5.5 4.8 9 4.8s6.5-1.6 9-4.8"/><path d="M6.2 14l-1.4 2M12 15.8v2.3M17.8 14l1.4 2"/></g><g class="op"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle class="pu" cx="12" cy="12" r="3" fill="currentColor" stroke="none"/></g></svg></span>Perfil visible para todos</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
Ver todos: CheckboxesDónde usarlo
Los ajustes de visibilidad merecen un icono que diga lo que hacen. Esta casilla muestra un ojo dormido con la opción desactivada y lo abre con un barrido suave al activarla; después, la pupila mira a un lado y a otro de vez en cuando. Encaja en paneles de privacidad, visibilidad del perfil, mostrar contraseña y permisos de documentos compartidos.
Como el checkbox nativo sigue ahí, la etiqueta puede decir con exactitud qué cambia, por ejemplo quién ve un perfil. Con movimiento reducido el ojo se abre sin mirar a los lados y el estado sigue claro.