Drehregler-Auswahl
Ein runder Drehknopf mit vier Programmen ringsum; der Zeiger dreht sich zum gewählten.
Einstellungen
Code
<fieldset class="uv-rdl"><legend>Programm</legend><div class="wh"><span class="kn" aria-hidden="true"><i></i></span><label style="--a:-90deg"><input type="radio" name="uv-rdl"><span>Eco</span></label><label style="--a:-30deg"><input type="radio" name="uv-rdl" checked><span>Normal</span></label><label style="--a:30deg"><input type="radio" name="uv-rdl"><span>Intensiv</span></label><label style="--a:90deg"><input type="radio" name="uv-rdl"><span>Schnell</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
Haushaltsgeräte nutzen seit Jahrzehnten Drehknöpfe, und jeder versteht sie sofort. Hier liegen vier Programme um einen weichen 3D-Knopf, und bei der Auswahl dreht sich der leuchtende Zeiger mit leichtem Überschwingen dorthin. Passt zu Apps für Waschmaschine und Backofen, Kaffeemaschinen, Audioeffekte und jede Einstellung mit wenigen benannten Modi.
Der Winkel wird über den :has-Selektor gesteuert, alles funktioniert also ohne JavaScript. Die Labels sind echte Radiobuttons, die Pfeiltasten drehen den Regler daher ebenfalls, und die Hauptfarbe färbt Zeiger und aktives Label.