Hi-fi knob toggle

A knurled aluminium knob turns from 0 to I on a black faceplate, and the arrow keys turn it as well.

Settings

Main color#ffaa1d

Secondary color#d2d6dc

Size16px

Speed1x

Text

Code

index.html

<label class="uvq03-hfk"><input type="checkbox" role="switch"><span class="dl"><b class="l0">0</b><b class="l1">I</b><span class="kb"><i></i></span><i class="led"></i></span>Bass boost</label>

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.

Markdown version with all the code, for AI assistants

More in Toggles

See all Toggles

Elastic iOS toggle

TogglesHTML + CSS

Day and night toggle

TogglesHTML + CSS

ON / OFF toggle

TogglesHTML + CSS

Neon glow toggle

TogglesHTML + CSS

Toggle with cross and check

TogglesHTML + CSS

Neumorphic toggle

TogglesHTML + CSS

Wall light switch toggle

TogglesHTML + CSS

Liquid toggle

TogglesHTML + CSS

Where to use it

Taken from the front panel of a stereo amplifier, this switch is a knurled aluminium knob on a black plate with 0 and I marks and an amber LED. Turning it on rotates the knob a quarter turn with a springy stop, lights the LED and highlights the I. A short script also lets the arrow keys turn it. It suits audio settings and premium hardware sites.

The main color is the LED and the active mark, the second one tints the metal cap. A warm champagne gives a vintage amplifier look, while a cool grey reads as modern studio gear.