HTML + CSSRadio buttons
Avatar picker
Five gradient avatars; the chosen one grows with a colored ring and shows its name.
Settings
16px
1x
Code
<fieldset class="uv-rav"><legend>Choose your 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">Fox</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">Whale</span></label><label style="--a:#22c55e;--b:#bef264"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🐸</span><span class="nm">Frog</span></label><label style="--a:#a855f7;--b:#f9a8d4"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🦄</span><span class="nm">Unicorn</span></label><label style="--a:#334155;--b:#94a3b8"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🐧</span><span class="nm">Penguin</span></label></div></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
See all Radio buttonsWhere to use it
Sign-up flows, kids' platforms and community apps often let people pick a default avatar before they upload a photo. Each option here is a round gradient tile with an animal; the selected one scales up with a double ring and its name fades in beneath it, while the others shrink slightly and dim.
Swap the emoji for illustrations or initials and adjust each gradient in the code. The ring color comes from the main color control, and the group is a set of native radios, so the choice is sent with the form.