Bootstrap 5Forms

Bootstrap 5 Toggle Switch

The Bootstrap 5 Toggle Switch is a styled checkbox input that renders as a sliding on/off control using the `.form-check-input` class combined with `.form-switch` on the wrapper. It is semantically identical to a checkbox but communicates a binary state more clearly in UI contexts like settings panels, preference toggles, and feature flags. Use it when the action takes effect immediately without requiring a form submission.

Primary Class

.toggle-switch

Common Use Cases

→Enabling or disabling email notification preferences in a user account settings page
→Toggling dark mode on and off within an app's appearance settings panel
→Activating or deactivating individual features in a SaaS product's feature management dashboard
→Allowing users to opt in or out of SMS marketing messages during a checkout flow

Variants & Classes

Variant	Description	Classes
Toggle Switch Default	Standard toggle switch with Bootstrap's default styling.	`toggle-switch`
Toggle Switch Responsive	Responsive variant that adapts to different screen sizes.	`toggle-switch toggle-switch-responsive`

Code Example

<div class="mb-3">
  <h6 class="mb-3">Notification Preferences</h6>

  <div class="form-check form-switch mb-2">
    <input class="form-check-input" type="checkbox" role="switch" id="emailNotifications" checked>
    <label class="form-check-label" for="emailNotifications">Email notifications</label>
  </div>

  <div class="form-check form-switch mb-2">
    <input class="form-check-input" type="checkbox" role="switch" id="smsNotifications">
    <label class="form-check-label" for="smsNotifications">SMS notifications</label>
  </div>

  <div class="form-check form-switch mb-2">
    <input class="form-check-input" type="checkbox" role="switch" id="weeklyDigest" checked>
    <label class="form-check-label" for="weeklyDigest">Weekly digest</label>
  </div>

  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="productUpdates" disabled>
    <label class="form-check-label text-muted" for="productUpdates">Product updates (unavailable on your plan)</label>
  </div>
</div>

Live Examples

Basic Toggle Switch

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated toggle switch with custom colours
✓Toggle Switch with interactive states
✓Responsive toggle switch for all screen sizes

Best Practices

Always include role="switch" for screen readers

Adding `role="switch"` to the checkbox input tells assistive technologies to announce the element as a toggle switch rather than a plain checkbox, which gives users accurate context about the control's behaviour.

Pair each toggle with a visible label

Never rely on position or colour alone to communicate state. A connected `<label>` with a matching `for` attribute ensures the toggle is operable by keyboard and correctly announced by screen readers.

Use the disabled attribute with a clear explanation

When a toggle is unavailable, add `disabled` to the input and include a short reason in the label text (such as 'upgrade required') so users understand why the control cannot be changed rather than assuming it is a bug.

Trigger immediate feedback when the state changes

Toggle switches imply instant action, so pair them with JavaScript that applies the change on the `change` event rather than waiting for a form submit button. If the action requires a server round trip, show a spinner inside or next to the toggle until confirmation arrives.

FAQ

What is the difference between a Toggle Switch and a regular Bootstrap 5 checkbox?

They are the same underlying HTML input element. The visual difference is achieved by adding the `.form-switch` class to the `.form-check` wrapper div. Bootstrap replaces the standard checkbox appearance with a wider pill-shaped track and a circular thumb using CSS. Both submit the same `on` or `off` value in a form, so the choice is purely about how the interaction should be communicated to the user. Use a toggle when the action is immediate and binary; use a checkbox when the user must submit a form to confirm choices.

How do I change the colour of the Toggle Switch to match my brand?

Bootstrap 5 uses the `--bs-primary` CSS custom property to colour the active state of the toggle. The simplest approach is to override this variable at the `:root` level or on a specific parent element: `--bs-primary: #your-hex-colour;`. If you need more control, target `.form-check-input:checked` in your custom CSS and set `background-color` and `border-color` directly. For the thumb colour, override `--bs-form-switch-bg` which sets the SVG used as the knob image.

How does Canvas Builder handle Toggle Switch components?

When you describe a settings or preferences section in Canvas Builder, the AI generates correctly structured `.form-switch` markup with matching `for` and `id` attributes, `role="switch"` on every input, and pre-applied brand colours drawn from your project settings. The output is production-ready HTML that fits the Canvas Bootstrap 5 template without requiring any manual class corrections.