Bootstrap 5Forms

Bootstrap 5 Toggle Switch

Q: 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.

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.

Bootstrap class

.form-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 and classes

Variant	Description and classes	Classes
Switch	Checkbox rendered as an on and off switch.`form-check form-switch + form-check-input + role="switch"`	`form-check form-switch + form-check-input + role="switch"`
Checked	Starts in the on position.`form-check-input + checked attribute`	`form-check-input + checked attribute`
Disabled	Visible but cannot be changed.`form-check-input + disabled attribute`	`form-check-input + disabled attribute`
Reverse	Switch on the right of its label.`form-check form-switch form-check-reverse`	`form-check form-switch form-check-reverse`

Code example

HTML

<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 template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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.