HTML + CSSRadio buttons
Tarjetas radio con icono
Cada opción es una tarjeta con icono; la elegida se eleva y su borde se ilumina.
Ajustes
16px
1x
Código
<div class="uv-rdc"><label><input type="radio" name="rdc" checked><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg><b>Casa</b></span></label><label><input type="radio" name="rdc"><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h18v12H3zM8 7V4h8v3"/></svg><b>Oficina</b></span></label><label><input type="radio" name="rdc"><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 7v9H3v-9z M9 19v-5h6v5"/></svg><b>Local</b></span></label></div>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 Radio buttons
Ver todos: Radio buttonsDónde usarlo
Las tarjetas hacen la elección más tangible cuando cada opción se puede imaginar. Piensa en una empresa de limpieza que pregunta qué tipo de espacio tienes o en el tipo de dirección de un formulario de envío: casa, oficina o local, cada uno con su icono. Tarjetas radio en HTML y CSS, fáciles de pulsar en el móvil.
Aquí los iconos hacen la mitad del trabajo, así que elige unos que distingan bien cada opción. Caben tres o cuatro por fila; si tienes más, deja que bajen a otra línea en vez de encogerlas.