HTML + CSSRadio buttons
FM radio tuner selector
Pick a station and the needle glides along a backlit dial to its frequency.
Settings
16px
1x
Code
<fieldset class="uv-rfm"><legend>Station</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> News</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 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
This radio group is a literal radio. A warm backlit dial shows frequency marks from 88 to 108, and choosing a station below moves the red needle to its spot with a slow, slightly bouncy glide, like turning a real tuning knob. It is a charming fit for music apps, podcast categories, playlists and retro brand pages.
Stations are ordinary radio buttons laid out in a grid, so they work with keyboard and touch. Change frequencies, names and needle positions in the code, and use the two colors to set the needle and the dial light.