HTML + CSSRadio buttons
Radio con anillo dibujado
Un anillo se traza alrededor de la opción elegida y justo después se rellena el punto central.
Ajustes
16px
1x
Código
<div class="uv-rdr"><label><input type="radio" name="rdr"><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Estándar</label><label><input type="radio" name="rdr" checked><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Rápido</label><label><input type="radio" name="rdr"><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Urgente</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
El anillo que rodea la opción recuerda a marcar una respuesta con boli, y va bien en elecciones de velocidad o prioridad: envío estándar, exprés o urgente en un checkout, el plazo de una imprenta online o la prioridad de una incidencia de soporte. Un radio button con anillo SVG en HTML y CSS.
Los dos pasos, primero el anillo y luego el punto, duran medio segundo. Con tres o cuatro opciones va bien, pero en una lista larga se hace lento. Añade el plazo o el precio en cada opción para que elegir sea más fácil.