HTML + CSSRadio buttons
Dial rotatorio
Un mando giratorio con cuatro programas alrededor; el puntero gira hacia el que elijas.
Ajustes
16px
1x
Código
<fieldset class="uv-rdl"><legend>Programa</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>Intensivo</span></label><label style="--a:90deg"><input type="radio" name="uv-rdl"><span>Rápido</span></label></div></fieldset>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Radio buttons
Ver todos: Radio buttonsDónde usarlo
Los electrodomésticos llevan décadas usando mandos giratorios y todo el mundo los entiende al momento. Aquí cuatro programas rodean un mando 3D suave y al elegir uno el puntero luminoso gira hacia él con un pequeño rebote. Encaja en apps de lavadoras y hornos, cafeteras, efectos de audio y cualquier ajuste con unos pocos modos con nombre.
El ángulo del mando lo controla el selector :has, así que todo funciona sin JavaScript. Las etiquetas son radios de verdad, de modo que las flechas del teclado también giran el dial.