HTML + CSSRadio buttons
Sintonizador de radio
Elige una emisora y la aguja recorre el dial retroiluminado hasta su frecuencia.
Ajustes
16px
1x
Código
<fieldset class="uv-rfm"><legend>Emisora</legend><div class="dl" aria-hidden="true"><span class="sc"></span><span class="nm"><b>88</b><b>92</b><b>96</b><b>100</b><b>104</b><b>108</b></span><i class="nd"></i></div><div class="st"><label><input type="radio" name="uv-rfm"><span><b>88.2</b> Jazz</span></label><label><input type="radio" name="uv-rfm"><span><b>94.6</b> Noticias</span></label><label><input type="radio" name="uv-rfm" checked><span><b>101.3</b> Pop</span></label><label><input type="radio" name="uv-rfm"><span><b>107.9</b> Rock</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
Este grupo de radios es literalmente una radio. Un dial cálido y retroiluminado muestra las marcas de 88 a 108 y al elegir una emisora debajo la aguja roja se desliza hasta su sitio con un recorrido lento y un poco elástico, como al girar un sintonizador de verdad. Queda precioso en apps de música, categorías de podcasts, playlists y webs de marca retro.
Las emisoras son radios normales en una rejilla, así que funcionan con teclado y táctil. Cambia frecuencias, nombres y posiciones en el código y usa los dos colores para la aguja y la luz del dial.