Toggle con cruz y check
La bola da una vuelta completa al cruzar el interruptor y cambia una cruz roja por un check.
Ajustes
Código
<label class="uv-tc"><input type="checkbox" checked><span><i><svg viewBox="0 0 24 24"><path class="x" d="M7 7l10 10M17 7L7 17"/><path class="v" d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></span></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 Toggles
Dónde usarlo
Cuando un interruptor controla un permiso, los iconos quitan cualquier duda. Este toggle con cruz y check encaja en las preferencias de cookies («Cookies analíticas»), en opciones de privacidad como «Perfil público» o en los avisos por email de una cuenta de tienda online. Apagado, el carril es rojo con una cruz. Encendido, la bola rueda y muestra un check.
El rojo es una señal fuerte y puede hacer que opciones inofensivas parezcan errores. Para algo tan ligero como «Mostrar consejos», un toggle neutro resulta más amable. El color de encendido sigue tu color principal; el rojo del apagado es fijo.