react-bootstrap component Switches not working

Question

The bootstrap switches not seems to be working. Even the documentation version not workng

<Form>
  <Form.Check 
    type="switch"
    id="custom-switch"
    label="Check this switch"
  />
  <Form.Check 
    disabled
    type="switch"
    label="disabled switch"
    id="disabled-custom-switch"
  />
</Form>

Answer 1

Simple FormCheck is working for me:

<FormCheck 
  id="switchEnabled"
  type="switch"
  checked={this.state.settings.enabled}
  onChange={this.toggleEnabled}
  label="Enable"
/>

The key point was to provide id. Another important thing (to load the initial value) was to use checked property.

Answer 2

Unfortunately documentation for the switch isn't the greatest. Nevertheless, the following should help with setting up the switch for your use.

const [isSwitchOn, setIsSwitchOn] = useState(false);

const onSwitchAction = () => {
  setIsSwitchOn(!isSwitchOn);
};

...
<Form>
  <Form.Switch
    onChange={onSwitchAction}
    id="custom-switch"
    label="anything you want to put here"
    checked={isSwitchOn}
    disabled // apply if you want the switch disabled
  />
</Form>
...

Answer 3

I found an approach.

import React from "react";
import ReactDOM from "react-dom";
import { Container, Form, FormCheck, Button } from "react-bootstrap";

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  const [swt, setSwt] = React.useState(true);
  const [swt2, setSwt2] = React.useState(true);

  return (
    <Container className="App">
      Aprroch 1
      <FormCheck custom type="switch">
        <FormCheck.Input isInvalid checked={swt} />
        <FormCheck.Label onClick={() => setSwt(!swt)}>
          {`Value is ${swt}`}
        </FormCheck.Label>
      </FormCheck>
      Approch 2
      <Form.Check custom type="switch">
        <Form.Check.Input isInvalid checked={swt2} />
        <Form.Check.Label onClick={() => setSwt2(!swt2)}>
          {`Value is ${swt2}`}
        </Form.Check.Label>
      </Form.Check>
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

codeSandbox

Answer 4

If you add the custom property it will show the switch button, but I'm still not able to toggle the switch...

<Form>
  <Form.Check
    custom
    type="switch"
    id="custom-switch"
    label="Check this switch"
  />
</Form>

Answer 5

I had a similar issue and adding custom as suggested in another answer showed the switch correctly but similarly the toggle would now work.

I noticed that I was pointing at an older version of react-bootstrap so changed this to point to the current version which at the time is v1.0.0-beta.16 and this allowed the toggle to work and custom to be removed.

So best to make sure you are pointing at the latest version of react-bootstrap if you're having problems like this: React Bootstrap

Answer 6

I used classes like simple bootstrap

<div className="form-check form-switch">
    <input className="form-check-input" type="checkbox" id="flexSwitchCheckDefault"/>
    <label className="form-check-label" for="flexSwitchCheckDefault">
           switch checkbox input
    </label>
</div> 

Answer 7

<FormCheck 
  id="switchEnabled1"
  type="switch"
  checked={this.state.settings.enabled}
  onChange={this.toggleEnabled}
  label="Enable"
/>

Changing the id of the switch from switchEnabled to switchEnabled1 seems to be working. You have to have different id for the switch if you are using it at multiple places.

Answer 8

I think we need to use useState like this

 <Form.Check type="switch" id="custom-switch" label="Email" checked={emailChecked} onChange = {() => setEmailChecked(:emailChecked)} style={{ marginLeft: '20px' }} />