<Form.Check  label="Default checkbox"/>
<Form.Check defaultChecked     
label="Checked checkbox"/>

<Form.Check disabled  label="Disabled checkbox"/>
<Form.Check disabled defaultChecked
label="Disabled checked checkbox"/>

<Form.Check type="radio"  label="Default radio"/>
<Form.Check type="radio" defaultChecked  
label="Default checked radio"/>

<Form.Check type="radio" disabled  label="Default radio"/>
<Form.Check type="radio" disabled defaultChecked 
label="Default checked radio"/>

<Form.Check  label="Default checkbox"/>
<Form.Check disabled  label="Default checkbox"/>
<Form.Check type="radio"  label="Default checkbox"/>
<Form.Check type="radio" disabled  label="Default checkbox"/>

<Form.Check type="switch"  label="Default switch checkbox input"/>
<Form.Check type="switch" defaultChecked  label="Default switch checkbox input"/>
<Form.Check type="switch" disabled  label="Default switch checkbox input"/>
<Form.Check type="switch" disabled defaultChecked  label="Default switch checkbox input"/>

<Form.Check className="form-check-inline" type="checkbox" label="1"/>
<Form.Check className="form-check-inline" type="checkbox" label="2"/>
<Form.Check className="form-check-inline" disabled type="checkbox"
label="3 (disabled)"/>
<Form.Check className="form-check-inline" type="radio" label="1"/>
<Form.Check className="form-check-inline" type="radio" label="2"/>
<Form.Check className="form-check-inline" disabled type="radio"
label="3 (disabled)"/>

<span className="me-3">
<Form.Check className="" type="checkbox" /></span>
<span><Form.Check className="" type="radio" /></span>

<Form.Check 
className="form-check-reverse mb-3"
type="checkbox" 
label="Reverse checkbox" />
<Form.Check 
className="form-check-reverse mb-3" 
type="checkbox" disabled 
label="Disabled reverse checkbox" />
<Form.Check 
className="form-check-reverse mb-3" 
type="switch" 
label="Reverse switch checkbox input" />

<Form.Control type="checkbox" 
className="btn-check"id="btn-check-outlined"/>
<Button variant='outline-primary' 
className="mb-3">Single toggle</Button><br/>
<Form.Check type="checkbox"
className="btn-check" id="btn-check-2-outlined" defaultChecked />
<Button variant='outline-secondary' 
className=" mb-3">Checked</Button><br/>
<Form.Check type="radio" className="btn-check" 
name="options-outlined" id="success-outlined"
defaultChecked/>
<Button variant='outline-success' 
className="m-1">Checked success
radio</Button>
<Form.Check type="radio" className="btn-check"
name="options-outlined" id="danger-outlined"
/>
<Button variant='outline-danger'className="m-1"
>Danger radio</Button>

<Form.Check type="radio" className="btn-check" name="options"
id="option1" defaultChecked/>
<Button className="btn btn-primary m-1">Checked</Button>
<Form.Check type="radio" className="btn-check" name="options" 
id="option2" />
<Button className="btn btn-primary m-1">Radio</Button>
<Form.Check type="radio" className="btn-check" name="options" 
id="option3" disabled/>
<Button disabled className="btn btn-primary m-1">Disabled</Button>
<Form.Check type="radio" className="btn-check" name="options" 
id="option4"/>
<Button className="btn btn-primary m-1">Radio</Button>

<Form.Check type="checkbox" className="btn-check" id="btn-check"/>
<Button className="btn btn-primary m-1">Single toggle</Button>
<Form.Check type="checkbox" className="btn-check" id="btn-check-2" defaultChecked />
<Button className="btn btn-primary m-1">Checked</Button>
<Form.Check type="checkbox" className="btn-check" id="btn-check-3"disabled/>
<Button disabled className="btn btn-primary m-1">Disabled</Button>

export default function BasicModal () {   
const [secondary1, setsecondary1] = useState("on");
const [success1, setsuccess1] = useState("on");
const [dark1, setdark1] = useState("on");
const [primary1, setprimary1] = useState("on");
const [warning1, setwarning1] = useState("on");
const [info1, setinfo1] = useState("on");
const [danger1, setdanger1] = useState("on");
const [light1, setlight1] = useState("on");
**Note: "Here In place of dolor we have given the dolor value."
return(
<Row className="row gy-1">

<Col xl={4}>
<div className={toggle  00024{primary1}} onClick={() => { primary1 == "on" ? setprimary1("off") : setprimary1("on"); }}>
<span></span>
</div>
</Col>
<Col xl={4}>
<div className={toggle mb-3  toggle-secondary 00024{secondary1}} onClick={() => { secondary1 == "on" ? setsecondary1("off") : setsecondary1("on"); }}>
<span></span>
</div>
</Col>
<Col xl={4}>
<div className={toggle mb-3  toggle-warning 00024{warning1}} onClick={() => { warning1 == "on" ? setwarning1("off") : setwarning1("on"); }} >
<span></span>
</div>
</Col>
</Row>
)}

<div className="form-check form-switch mb-2">
<input type="radio" className="form-check-input  form-checked"
id="primaryChecked"  role="switch"defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
Primary
</label>
</div>
<div className="form-check form-switch mb-2">
<input type="radio" 
className="form-check-input  form-checked-secondary"
id="secondaryChecked"  role="switch"defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
Secondary
</label>
</div>
<div className="form-check form-switch mb-2">
<input type="radio" 
className="form-check-input  form-checked-warning"
id="warningChecked"  role="switch"defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
Warning
</label>
</div>
<div className="form-check form-switch mb-2">
<input type="radio" 
className="form-check-input  form-checked-info"
id="infoChecked"  role="switch"defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
info
</label>
</div>

<div className="d-flex align-items-center flex-wrap mb-3">
<div className=""> <p className="text-muted m-0">Small size toggle switch <code>toggle-sm</code></p></div>
<div className="toggle toggle-sm on mb-0">
<span></span>
</div>
</div>
<div className="d-flex align-items-center flex-wrap mb-3">
<div className=""> <p className="text-muted m-0">Default toggle switch <code></code></p></div>
<div className="toggle toggle-secondary on mb-0">
<span></span>
</div>
</div>
<div className="d-flex align-items-center flex-wrap">
<div className=""> <p className="text-muted m-0">Large size toggle switch <code>toggle-lg</code></p></div>
<div className="toggle toggle-lg toggle-success on mb-0">
<span></span>
</div>
</div>

<div className="d-flex align-items-center flex-wrap mb-4">
<div className=""><p className="text-muted m-0">Small size toggle switch <code>toggle-sm</code></p></div>
<div className="custom-toggle-switch toggle-sm ms-2">
<Form.Control id="size-sm" name="toggleswitchsize" type="checkbox" defaultChecked/>
<Form.Label htmlFor="size-sm" className="label-primary"></Form.Label>
</div>
</div>
<div className="d-flex align-items-center flex-wrap mb-4">
<div className=""><p className="text-muted m-0">Default toggle switch</p></div>
<div className="custom-toggle-switch ms-2">
<Form.Control id="size-default" name="toggleswitchsize" type="checkbox" defaultChecked/>
<Form.Label htmlFor="size-default" className="label-secondary mb-1"></Form.Label>
</div>
</div>
<div className="d-sm-flex d-block align-items-center flex-wrap">
<div className="mb-sm-0 mb-2"><p className="text-muted m-0">Large size toggle switch <code>toggle-lg</code></p></div>
<div className="custom-toggle-switch toggle-lg ms-sm-2 ms-0">
<Form.Control id="size-lg" name="toggleswitchsize" type="checkbox" defaultChecked/>
<Form.Label htmlFor="size-lg" className="label-success mb-2"></Form.Label>
</div>
</div>