How can I make an accessible custom switch with labels on both sides?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How can I make an accessible custom switch with labels on both sides?

Asked on Jul 08, 2025

Answer

To create an accessible custom switch with labels on both sides using Bootstrap 5, you can use the `form-check` and `form-switch` classes. Here's a simple example:

<!-- BEGIN COPY / PASTE -->
        <div class="form-check form-switch">
            <label class="form-check-label" for="customSwitch">
                Off
            </label>
            <input class="form-check-input" type="checkbox" id="customSwitch" aria-label="Toggle switch">
            <label class="form-check-label" for="customSwitch">
                On
            </label>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `form-check` class is used to group the switch and labels.
The `form-switch` class is used to style the checkbox as a switch.
Each `label` is associated with the input by using the `for` attribute, which matches the `id` of the input.
The `aria-label` attribute on the input provides an accessible name for screen readers.
You can customize the labels and styling as needed.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I make an accessible custom switch with labels on both sides?

Asked on Jul 08, 2025

Answer

The Q&A Network