HTML + CSSRadiobuttons
Avatar-Auswahl
Fünf Verlaufs-Avatare; der gewählte wächst mit farbigem Ring und zeigt seinen Namen.
Einstellungen
16px
1x
Code
<fieldset class="uv-rav"><legend>Wähle deinen 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">Fuchs</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">Wal</span></label><label style="--a:#22c55e;--b:#bef264"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🐸</span><span class="nm">Frosch</span></label><label style="--a:#a855f7;--b:#f9a8d4"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🦄</span><span class="nm">Einhorn</span></label><label style="--a:#334155;--b:#94a3b8"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🐧</span><span class="nm">Pinguin</span></label></div></fieldset>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Radiobuttons
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Registrierungen, Kinderplattformen und Community-Apps lassen oft einen Standard-Avatar wählen, bevor ein Foto hochgeladen wird. Jede Option ist eine runde Verlaufskachel mit einem Tier, die gewählte wird mit Doppelring größer und ihr Name blendet darunter ein, die anderen schrumpfen leicht und werden blasser.
Tausche die Emojis gegen Illustrationen oder Initialen und passe jeden Verlauf im Code an. Die Ringfarbe kommt aus der Hauptfarbe, und die Gruppe besteht aus nativen Radios, die Wahl wird also mit dem Formular gesendet.