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

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>

CodePudding user response：

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

CodePudding user response：

Works like a charm:

<div >
  <input  type="checkbox" id="flexSwitchCheckDefault">
  <label  for="flexSwitchCheckDefault">Enable Darkmode</label>
</div>