Programa
HTML + CSSBoutons radio

Sélecteur à molette

Une molette ronde entourée de quatre programmes ; l'aiguille tourne vers celui que tu choisis.

Réglages

16px
1x

Code

<fieldset class="uv-rdl"><legend>Programme</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>Intensif</span></label><label style="--a:90deg"><input type="radio" name="uv-rdl"><span>Rapide</span></label></div></fieldset>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Boutons radio

Voir tout : Boutons radio

Où l’utiliser

L'électroménager utilise des molettes depuis des décennies et tout le monde les comprend immédiatement. Ici, quatre programmes entourent une molette 3D douce, et en choisir un fait tourner l'aiguille lumineuse vers lui avec un léger rebond. Idéal pour les applis de lave-linge et de four, les cafetières, les effets audio et tout réglage à quelques modes nommés.

L'angle de la molette est piloté par le sélecteur :has, tout fonctionne donc sans JavaScript. Les libellés sont de vrais boutons radio, les flèches du clavier tournent donc aussi la molette.