Custom Switch Functional but doesn't change position

Front End Components General
#1

I’m probably missing something simple here. I have a Custom Switch which works (i.e. clicking the switch causes the checked value to change), but the switch doesn’t appear to be checked on the UI.

It was working, but something I did broke it.

Here’s my code:

<div class="form-group inline">

   <div class="custom-control custom-switch">

                            <label class="custom-control-label form-label" for="showFilterHaulDates">Only show Customers with Hauls between specific dates</label>

                            <input class="custom-control-input" type="checkbox" id="showFilterHaulDates" name="input1">

                        </div>

                    </div>
#2

If you create another custom switch using the UI, you should be able to see what’s wrong. I think the <label> needs to go after the <input>.

1 Like
#3

Thanks @TomD. That was it. I even added a new one to check what I did wrong, but never thought that would affect it.