ON / OFF toggle
A switch that spells out its state, with ON and OFF sliding in and out beside the knob.
Settings
Code
<label class="uv-tt"><input type="checkbox" checked><span><em>ON</em><em>OFF</em></span></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
Where to use it
Some switches need to say what they are doing, not just show a color. This ON/OFF toggle fits admin panels and billing screens: “Maintenance mode” in a CMS, “Auto-renew” on a subscription page or “Two-factor login” in security settings. The words slide in with the knob, so nobody has to guess whether blue means on.
It also helps people who don't tell colors apart easily. Keep the labels to two or three letters, like ON and OFF or YES and NO; longer words won't fit inside the track. You can translate them straight in the HTML.