Rotary dial selector
A round control knob with four programs around it; the pointer turns to the one you choose.
Settings
Code
<fieldset class="uv-rdl"><legend>Program</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>Intensive</span></label><label style="--a:90deg"><input type="radio" name="uv-rdl"><span>Fast</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
Appliance interfaces have used rotary knobs for decades, and people understand them instantly. Here four programs sit around a soft 3D knob, and selecting one rotates the glowing pointer toward it with a springy overshoot. It suits washing machine and oven apps, coffee makers, audio effects and any setting with a few named modes.
The knob angle is driven by the :has selector, so the whole thing works without JavaScript. The labels are real radio buttons, which means keyboard arrows turn the dial too, and the main color sets the pointer and the active label.