HTML + CSSRadio buttons
Elegir avatar
Cinco avatares de degradado; el elegido crece con un anillo de color y muestra su nombre.
Ajustes
16px
1x
Código
<fieldset class="uv-rav"><legend>Elige tu avatar</legend><div class="gr"><label style="--a:#ff8a5c;--b:#ffd166"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🦊</span><span class="nm">Zorro</span></label><label style="--a:#4f7bff;--b:#8fe3ff"><input type="radio" name="uv-rav" checked><span class="av" aria-hidden="true">🐳</span><span class="nm">Ballena</span></label><label style="--a:#22c55e;--b:#bef264"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🐸</span><span class="nm">Rana</span></label><label style="--a:#a855f7;--b:#f9a8d4"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🦄</span><span class="nm">Unicornio</span></label><label style="--a:#334155;--b:#94a3b8"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🐧</span><span class="nm">Pingüino</span></label></div></fieldset>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
Los registros, las plataformas infantiles y las apps de comunidad suelen dejar elegir un avatar por defecto antes de subir una foto. Cada opción es una ficha redonda de degradado con un animal; la elegida crece con un doble anillo y su nombre aparece debajo, mientras las demás se encogen un poco y se atenúan.
Cambia los emojis por ilustraciones o iniciales y ajusta cada degradado en el código. El color del anillo sale del control de color principal y el grupo son radios nativos, así que la elección viaja con el formulario.