Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

Toggle Switches in Bootstrap 5

Toggle Switches: Bootstrap 5 includes custom toggle switch styles that work like checkboxes but with a different visual appearance.

Basic Switches

Standard Toggle Switches

Default switch

Checked switch

Disabled switch

Checked disabled switch

<!-- Basic Switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">
    Default switch
  </label>
</div>

<!-- Checked Switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">
    Checked switch
  </label>
</div>

<!-- Disabled Switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">
    Disabled switch
  </label>
</div>

<!-- Checked Disabled Switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">
    Checked disabled switch
  </label>
</div>

Switch Sizing

Different Switch Sizes

<!-- Small Switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switchSizeSm1">
  <label class="form-check-label small" for="switchSizeSm1">
    Small switch
  </label>
</div>

<!-- Default Switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switchSizeDefault1">
  <label class="form-check-label" for="switchSizeDefault1">
    Default switch
  </label>
</div>

<!-- Large Switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switchSizeLg1">
  <label class="form-check-label h5" for="switchSizeLg1">
    Large switch
  </label>
</div>

Switch Without Labels

Standalone Switches

Switches with Screen Reader Labels

🌙

🔔

Icon-Only Switches

📶

📱

<!-- Switch with Screen Reader Label -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="noLabelSwitch1">
  <label class="visually-hidden" for="noLabelSwitch1">
    Toggle dark mode
  </label>
  <span class="ms-2">🌙</span>
</div>

<!-- Icon-only Switch -->
<div class="d-flex align-items-center">
  <div class="form-check form-switch mb-0">
    <input class="form-check-input" type="checkbox" id="iconSwitch1">
    <label class="visually-hidden" for="iconSwitch1">Wi-Fi</label>
  </div>
  <span class="ms-2">📶</span>
</div>

Switch Groups

Multiple Switches Together

Settings Panel Example

Email Notifications

Receive email alerts for new messages

Push Notifications

Get push notifications on your device

SMS Notifications

Receive text message alerts

Two-Factor Authentication

Add extra security to your account

<!-- Switch Group Example -->
<div class="list-group">
  <div class="list-group-item d-flex justify-content-between align-items-center">
    <div>
      <h6 class="mb-0">Email Notifications</h6>
      <small class="text-muted">Receive email alerts</small>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="settingsSwitch1" checked>
      <label class="visually-hidden" for="settingsSwitch1">Email notifications</label>
    </div>
  </div>
  
  <div class="list-group-item d-flex justify-content-between align-items-center">
    <div>
      <h6 class="mb-0">Push Notifications</h6>
      <small class="text-muted">Get push notifications</small>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="settingsSwitch2" checked>
      <label class="visually-hidden" for="settingsSwitch2">Push notifications</label>
    </div>
  </div>
</div>

Switch Validation States

Valid and Invalid Switches

Valid Switches

Valid switch

This setting is properly configured.

Another valid switch

Invalid Switches

Invalid switch

You must enable this setting to continue.

Another invalid switch

<!-- Valid Switch -->
<div class="form-check form-switch">
  <input class="form-check-input is-valid" type="checkbox" id="validSwitch1" checked>
  <label class="form-check-label" for="validSwitch1">
    Valid switch
  </label>
  <div class="valid-feedback">
    This setting is properly configured.
  </div>
</div>

<!-- Invalid Switch -->
<div class="form-check form-switch">
  <input class="form-check-input is-invalid" type="checkbox" id="invalidSwitch1">
  <label class="form-check-label" for="invalidSwitch1">
    Invalid switch
  </label>
  <div class="invalid-feedback">
    You must enable this setting.
  </div>
</div>

Custom Switch Styling

Customized Switches

Colored Switches

Success colored switch

Danger colored switch

Warning colored switch

Switch with Custom Labels

OFF

Disabled

Enabled

🌞

🌙

<!-- Custom Colored Switch -->
<div class="form-check form-switch">
  <input 
    class="form-check-input" 
    type="checkbox" 
    id="customSwitch1" 
    style="background-color: #198754; border-color: #198754;"
    checked
  >
  <label class="form-check-label" for="customSwitch1">
    Success colored switch
  </label>
</div>

<!-- Switch with Custom Labels -->
<div class="d-flex align-items-center">
  <span class="me-2">OFF</span>
  <div class="form-check form-switch mb-0">
    <input class="form-check-input" type="checkbox" id="labeledSwitch1">
    <label class="visually-hidden" for="labeledSwitch1">Toggle feature</label>
  </div>
  <span class="ms-2">ON</span>
</div>

<!-- Switch with Icons -->
<div class="d-flex align-items-center">
  <span class="me-2">🌞</span>
  <div class="form-check form-switch mb-0">
    <input class="form-check-input" type="checkbox" id="labeledSwitch3" checked>
    <label class="visually-hidden" for="labeledSwitch3">Light/Dark mode</label>
  </div>
  <span class="ms-2">🌙</span>
</div>

Switch vs Checkbox Comparison

Aspect	Toggle Switch	Checkbox
Visual Appearance	Slider with ON/OFF states	Box with checkmark
HTML Structure	`type=&qout;checkbox&qout;` with `.form-switch`	`type=&qout;checkbox&qout;`
Use Case	Binary ON/OFF settings	Multiple selection options
Best For	Settings, preferences, feature toggles	Forms, surveys, multiple choices
Mobile Friendliness	✅ Excellent - familiar from mobile OS	✅ Good - standard web control
Example	&qout;Enable notifications&qout; (ON/OFF)	&qout;Select your interests&qout; (multiple)

Best Practices for Switches

When to Use Toggle Switches

Binary settings: ON/OFF, Enable/Disable, Show/Hide
Feature toggles: Turning features on or off
Settings panels: Configuration options in settings
Mobile interfaces: Familiar pattern from mobile apps
Immediate actions: Changes that take effect immediately
Simple choices: Between two mutually exclusive states

When to Avoid Toggle Switches

❌ For multiple selections (use checkboxes)
❌ When you need more than two states
❌ In forms that require submission to take effect
❌ When the action is not immediate
❌ For destructive actions without confirmation
❌ When radio buttons would be more appropriate

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial