Wählhebel einer Automatik
Ein Automatik-Wählhebel gleitet durch die Kulisse P, R, N, D, und der gewählte Buchstabe leuchtet bernsteinfarben auf.
Einstellungen
Code
<fieldset class="uvq04-gear"><legend>Gang</legend><div class="pn"><span class="gt" aria-hidden="true"><i class="kb"></i></span><div class="ls"><label><input type="radio" name="uvq04-gear" checked><b>P</b><span>Parken</span></label><label><input type="radio" name="uvq04-gear"><b>R</b><span>Rückwärtsgang</span></label><label><input type="radio" name="uvq04-gear"><b>N</b><span>Leerlauf</span></label><label><input type="radio" name="uvq04-gear"><b>D</b><span>Fahren</span></label></div></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
Diese Radiogruppe übernimmt den Wählhebel eines Automatikautos: Vier echte Radio-Inputs liegen neben einer dunklen Kulisse, ein runder Knauf fährt zur gewählten Stufe, und ihr Buchstabe leuchtet wie die Armaturenbeleuchtung. Alles ist CSS mit :has und passt zu Autokonfiguratoren, Fahr-Apps, verspielten Einstellungen und jeder Modusauswahl mit fester Reihenfolge.
Das Bernsteinlicht steuerst du über die Hauptfarbe, den Ton der Konsole über die Zweitfarbe. Benenne die vier Stufen passend zu deinem Produkt um, etwa Eco, Komfort, Sport und Rennstrecke, und halte die Beschriftungen kurz.