Zipper toggle
The pull slides across a denim patch and the brass teeth lock together one by one behind it.
Settings
Code
<label class="uvq03-zip"><input type="checkbox" role="switch"><span class="fb"><span class="tt"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i></span><span class="tb"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i></span><span class="pl"><i></i></span></span>Private mode</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
This switch is a real zipper in miniature: a patch of denim with dashed stitching, two rows of brass teeth and a metal pull with a dangling tab. Turning it on moves the pull to the right while each tooth closes with a small delay, so the zip seals behind it. The tab swings when it stops. It fits privacy settings, locked folders and fashion or outdoor brands.
The main color is the fabric and the second one is the metal of the teeth. Try olive canvas with silver teeth or black leather with gold, and keep the label short because the zipper is already wide.