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
Dó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.