Sí o no a mano
Una pregunta y dos palabras en una libreta: un rotulador rodea la respuesta elegida con un trazo suelto.
Ajustes
Código
<label class="uvq03-skt"><input type="checkbox" role="switch"><span class="q">¿Recibir el boletín?</span><span class="nb"><span class="o y">Sí<svg viewBox="0 0 60 36" aria-hidden="true"><path d="M44 6C30 1 8 4 5 16c-3 12 18 17 33 15 14-2 20-10 15-18C49 6 36 4 26 6" pathLength="1"/></svg></span><span class="o n">No<svg viewBox="0 0 60 36" aria-hidden="true"><path d="M16 5C30 1 54 5 55 17c1 11-20 16-34 13C8 27 2 20 7 12c4-6 16-8 28-7" pathLength="1"/></svg></span></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
Ver todos: TogglesDónde usarlo
Aquí el interruptor es un trozo de libreta pautada con Sí y No escritos en una letra manuscrita. La respuesta actual queda rodeada por un trazo suelto de rotulador rojo que se dibuja solo, mientras el otro se borra, así que la elección se lee como una nota en papel. Los trazos son caminos SVG animados con stroke-dashoffset. Encaja en encuestas, altas en boletines, cuestionarios y formularios cercanos.
El color principal es el rotulador y el secundario las líneas de la libreta. Cambia la pregunta en el campo de texto y deja que sea corta; la letra manuscrita es la del sistema, así que varía un poco según el dispositivo.