HTML + CSSToggles
Wall light switch toggle
A rocker switch on its wall plate that tips over and lights a small pilot LED.
Settings
16px
1x
Code
<label class="uv-twl"><input type="checkbox" role="switch"><span class="pl"><i class="led"></i><span class="rk"></span></span>Kitchen light</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.
More in Toggles
See all TogglesWhere to use it
Smart home apps often show a generic pill for every device. This toggle uses the object people already know: a white wall plate with a rocker that tilts when pressed, a tiny pilot light that turns on and a warm glow that spreads behind the plate. It suits lighting controls, room scenes and home automation dashboards.
Underneath it is a checkbox with the switch role, so assistive technology announces on and off. The main color sets the pilot light and the glow, so a cool white can stand for a fan or a heater in the same grid.