Is this a real checkbox or a button?

The generated control is a native checkbox with role=switch and a visible label. It keeps the checkbox's keyboard and form behavior; CSS only changes its appearance.

How do I turn the switch on with the keyboard?

Tab to the checkbox and press Space. The generated CSS shows a focus-visible ring so keyboard users can see where they are.

Does the switch need JavaScript?

No. The checkbox controls its checked appearance with the CSS :checked selector. Your form or application can read its checked value as usual.

Does the output support reduced motion?

Yes. The generated CSS disables the track and thumb transitions when the user requests reduced motion.

Is my design saved or uploaded?

No. The generator runs in your browser and does not store or transmit your settings.

CSS · GENERATOR

CSS Toggle Generator

Design a compact switch with a live preview, then copy the HTML and CSS. The output remains a native, keyboard-operable checkbox with a visible label and focus indicator.

CSS-only state · Native checkbox · Keyboard focus · Reduced-motion support

Want a button instead? CSS Button Generator →CSS changes the presentation; the checkbox keeps its normal form behavior.

Switch settings

Label & state

Accessible labelVisible text also labels the checkbox.

HTML IDStarts with a letter; letters, numbers, hyphens and underscores.

Start on Disabled

Presets

Dimensions & motion

Track width px

Track height px

Keep width at least 8 px greater than height so the thumb can travel.

Track shape

Transition ms

Colours

On track

Off track

Thumb

Focus ring

Live previewClick to toggle · Tab + Space

Notification preferences

Try the switch with a mouse or keyboard.

Email notifications

OffCheckbox is ready

Generated source

CSS: 0 BHTML: 0 BState: Off

Runs locally · No JavaScript in the generated switch

A switch that stays a checkbox

The generated markup uses an actual input type="checkbox" with role="switch", wrapped in a visible label. The :checked selector changes the track without JavaScript, and the native input keeps its keyboard and form semantics.

Copy the CSS from the source panel and place it in your stylesheet. Copy the HTML snippet where the control belongs. Give each switch a unique ID when using more than one on a page.

Keyboard and motion details

Tab focuses the checkbox; Space toggles it. A :focus-visible outline makes keyboard focus apparent.
The visible label remains associated with the checkbox. Checked and disabled states use native HTML attributes.
The CSS removes track and thumb transitions when prefers-reduced-motion: reduce is active.
Settings stay in memory only for the current page session; the tool does not upload or save them.