Open menu

CSS Toggle Switch, Checkbox & Radio Designer

Style switches, checkboxes and radio buttons without giving up native behavior. Every control is a real input with appearance:none, so keyboard support, forms and screen readers keep working, and switches add role="switch". Choose from six styles, set the size, colors and animation speed, and preview the on, off and disabled states. Checks cover off-state contrast, target size and semantics.

Preset gallery

Accessibility checks

  • Check The off state has only 2.6:1 contrast. Unchecked controls need 3:1 so people can find them (WCAG 1.4.11).
  • Pass The on state has 6.3:1 contrast with the background.
  • Pass The thumb or check mark has 6.3:1 contrast with the on color.
  • Pass At 28px with a 44px-tall label, the control is easy to hit (WCAG 2.5.8).
  • Pass A native checkbox with role="switch": screen readers announce "on" or "off", and Space toggles it.

Export code

<label class="toggle">
  <input class="toggle__input" type="checkbox" role="switch" checked>
  <span class="toggle__label">Email notifications</span>
</label>
Favourites on this device (0)

No favourites yet.

Control
Control type
Colors
On / checked color
Off color
Thumb / check mark color
Label color
Background

How to use the toggle designer

  1. Choose the control: switch, checkbox or radio.
  2. Pick a style: classic, rounded, square, minimal, bold or inset.
  3. Set the size (the label stays at least 44px tall, so the click area is generous) and the animation duration.
  4. Choose colors for the on state, the off state or border, and the thumb or check mark.
  5. Check the off-state contrast and target size.
  6. Export HTML and CSS, SCSS, Tailwind or React.

How it works

The input itself draws the track or box, and ::before draws the thumb, check mark or radio dot:

.toggle__input { appearance: none; width: 49px; height: 28px; border-radius: 999px; background: #94A3B8; }
.toggle__input::before { content: ''; /* thumb */ }
.toggle__input:checked { background: #4F46E5; }
.toggle__input:checked::before { transform: translate(21px, -50%); }

The whole label is clickable, focus shows a clear outline, and a forced-colors rule keeps the control visible in Windows High Contrast mode.

Worked examples

Example 1: notification settings

Load Switch · iOS style for each setting. Write labels as statements (“Email notifications”), not questions, so “on” and “off” make sense.

Example 2: a terms checkbox

Load Checkbox rounded at 24px. Place the label text after the box and link to the terms in the label. Required checkboxes also need an error message if left unchecked.

Example 3: plan selection

Load Radio classic. The HTML export wraps the options in a fieldset with a legend, so screen readers announce the question before the options.

Tips

  • Don’t use color alone for state. The thumb position and check mark do the job here.
  • Keep the animation short (100–250ms). It turns off for reduced-motion users.
  • Disabled controls should explain why they’re disabled somewhere nearby.

Common mistakes

  • Removing the input from the accessibility tree. Hiding the real input with display: none and styling a span breaks keyboard and screen-reader support. Style the input itself, as this tool does.
  • Switches inside forms that need a submit. If a change only applies after pressing Save, use a checkbox instead of a switch.
  • No visible focus. Every control needs a focus outline; the export includes one in the “on” color.

Frequently asked questions

Why style native inputs instead of building custom ones?

Native checkboxes and radios already handle keyboard focus, Space to toggle, arrow keys in radio groups, form submission and screen-reader announcements. appearance: none removes the default look so you can draw your own with CSS, while keeping all that behavior.

When should I use a switch instead of a checkbox?

Use a switch for settings that take effect immediately, like turning notifications on. Use a checkbox for choices that are submitted with a form, and radio buttons when exactly one option from a small set can be selected.

What does role="switch" change?

Screen readers announce the control as a switch that is "on" or "off" instead of a checkbox that is "checked". The underlying input is still a checkbox, so forms and keyboard support behave the same.

How do I make sure the off state is visible?

An unchecked control must still be visible so people can find it. WCAG 1.4.11 asks for 3:1 contrast for its boundary. The off-state check measures the track or border against the background.

Should a switch apply its change immediately?

Yes. Switches imply an instant effect, like a light switch. If the change only happens after pressing Save, use a checkbox instead.

Sources