Car radio preset keys
The mechanical keys of an old car radio: the one you press sinks in and the previous one pops back up.
Settings
Code
<fieldset class="uvq04-pst"><legend>Presets</legend><div class="fp"><div class="ds" aria-hidden="true"><span class="fq"></span><span class="st">ST</span></div><div class="ks"><label><input type="radio" name="uvq04-pst"><span class="ky"><b>1</b></span><span class="nm">Classical</span></label><label><input type="radio" name="uvq04-pst"><span class="ky"><b>2</b></span><span class="nm">News</span></label><label><input type="radio" name="uvq04-pst" checked><span class="ky"><b>3</b></span><span class="nm">Jazz</span></label><label><input type="radio" name="uvq04-pst"><span class="ky"><b>4</b></span><span class="nm">Pop</span></label><label><input type="radio" name="uvq04-pst"><span class="ky"><b>5</b></span><span class="nm">Sports</span></label></div></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
Radio buttons got their name from these keys: on old car radios, pressing one preset pushed it in and released the others. This block recreates that on a brushed chrome faceplate, with cream plastic keys that sink when chosen, spring back with a bounce and tune an amber display to the station frequency.
Use the main color for the display and the small indicator on the pressed key, and the secondary color for the plastic. Five keys fit comfortably; rename the stations or turn them into presets for a player, a heater or a coffee machine.