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

Asked on Jul 19, 2025

1 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.

← Back to All Questions