AIMRAN
HTML + CSSToggles

Monthly or yearly billing toggle

Switch from monthly to yearly billing and a savings badge pops in with a little bounce.

Settings

16px
1x

Code

<label class="uv-tbi"><input type="checkbox" role="switch"><span class="m">Monthly</span><span class="tr"><span class="kn"></span></span><span class="y">Yearly</span><span class="sv">Save 20%</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

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

Every pricing page needs this control, and the badge is what nudges people toward the annual plan. Both labels sit on either side of the switch and the active one becomes fully opaque. When yearly is selected, a green pill with the discount spins in with a spring, so the saving is impossible to miss.

Write the badge with the text control, for example Save 20 % or Two months free. The control is a single checkbox, so you can read its state in a form or connect it to your price table with a few lines of code.