Toggle Switch generator
Settings pages lean on lightning-input toggles for anything with an instantly-applied on/off effect — notification preferences, feature flags, visibility switches. Style the track colors and size so the switch is legible even at a glance.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-input
type="toggle"
label="Email notifications"
checked={isOn}
message-toggle-active="Enabled"
message-toggle-inactive="Disabled"
class="studio-toggle"
onchange={handleChange}
></lightning-input>
</template>Design tips for toggle switches
- Use toggles only for changes that apply immediately; anything that needs a "Save" click should be a checkbox instead.
- Keep on/off track colors far enough apart in lightness that colorblind users can still tell the states apart.
- Pair the toggle with a short on/off message (built into the generated markup) rather than relying on position alone.
Related components
Components developers commonly compare against or pair with Toggle Switch.