CODEWITHSUNDEEP
javascripthtmlreactjsbootstrap-4frontend
Harsh Mishra
Harsh Mishra

Reputation: 31

Why I am getting simple checkbox instead of toggle switch in react?

I am trying to make a toggle switch to enable dark mode using switches from the bootstrap, but after saving the same code turns out to be a simple checkbox. I have read from the documentation that in older assistive technologies, it (switch elements) will simply be announced as a regular checkbox as a fallback.

What should I update or change in bootstrap element or class to get the desired toggle switch?

Here's what I used:

 <div className="form-check form-switch text-light">
            <input
              className="form-check-input"
              type="checkbox"
              role="switch"
              id="flexSwitchCheckDefault"
            />

            <label
              className="form-check-label"
              htmlFor="flexSwitchCheckDefault"
            >
              Enable Darkmode
            </label>
          </div>

Upvotes: 1

Views: 302

Answers (2)

Harsh Mishra
Harsh Mishra

Reputation: 31

It seems like I was using an outdated version of Bootstrap. Changing the CDN links and script to the newest version of bootstrap helped.

Upvotes: 1

dr0nda
dr0nda

Reputation: 133

Works like a charm:

<div class="form-check form-switch text-light">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Enable Darkmode</label>
</div>

Upvotes: 0

Related Questions