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

Asked on Jul 19, 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.