"¿Si o no?"

Sara Soueidan profundiza en esta situación de HTML/UX. “Sí” o “no” es una situación booleana. Una casilla de verificación representa esto: está activada o desactivada (en su mayoría). ¿Pero una casilla de verificación es siempre la mejor UX? Depende, por supuesto:

Utilice botones de opción si espera que la respuesta se distribuya equitativamente. Si espero que la respuesta esté muy segura hacia una respuesta, prefiero la casilla de verificación. De esa manera, el usuario hace una declaración explícita o simplemente reconoce la respuesta esperada.

Si desea una respuesta concreta, deliberada y explícita y no desea una selección predeterminada, utilice los botones de opción. Una casilla de verificación tiene un estado predeterminado implícito. Y el usuario podría estar predispuesto a optar por la opción predeterminada. Por lo tanto, tener el requisito de un “No” explícito es el factor determinante.

Entonces tienes el enfoque de casilla de verificación:

label  input type="checkbox"  Yes?/label

Lo cual es bonito y compacto, pero no puedes hacerlo “requerido” (fácilmente) porque siempre está en un estado válido.

Entonces, si necesitas forzar una elección, los botones de opción (sin valores predeterminados) son más fáciles:

label  input type="radio" name="choice-radio"  Yes/labellabel  input type="radio" name="choice-radio"  No/label

Quiero decir, también podríamos considerar otra entrada de rango, que puede funcionar como un interruptor si la maximizas en 1:

label for="choice"Yes or No?/labelspan aria-hidden="true"No/spaninput type="range" max="1" name="choice"span aria-hidden="true"Yes/span

Jajaja.

Y supongo que selecttambién podría forzar la elección del usuario, ¿verdad?

label  Yes or no?  select    option value=""---/option    option value=""Yes/option    option value=""No/option  /select/label

Curiosamente, no odio eso sólo porque las selecciones son muy compactas y con estilo.

Sin embargo, si realmente quieres detenerte y hacer pensar a alguien, haz que lo escriba, ¿verdad?

label  Type "yes" or "no"  input type="text" pattern="[Yy]es|[Nn]o"/label

Ja.