Checkbox

src/components/Checkbox/Checkbox.scss

+
+input[type=checkbox], input[type=radio] {
+    box-sizing: border-box;
+    padding: 0;
+}
+
+.custom-control-input {
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    width: 1rem;
+    height: 1.25rem;
+    opacity: 0;
+}
+button, input {
+    overflow: visible;
+}
+button, input, optgroup, select, textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+}
+*, ::after, ::before {
+    box-sizing: border-box;
+}
+user agent stylesheet
+input[type="checkbox" i] {
+    background-color: initial;
+    cursor: default;
+    appearance: auto;
+    box-sizing: border-box;
+    margin: 3px 3px 3px 4px;
+    padding: initial;
+    border: initial;
+}
\ No newline at end of file

src/components/Checkbox/index.jsx

+import React from 'react'
+import PropTypes from "prop-types";
+import "./Checkbox.scss";
+
+function Checkbox(props) {
+const{label,customClass}=props;
+  return (
+  
+<>
+    <checkbox className={`btn ${customClass}`}>
+      {label}
+      </checkbox>
+   
+</>
+    )
+  }
+
+export default Checkbox

src/containers/Login/index.jsx

 import React from "react";
 import PropTypes from "prop-types";
+import Checkbox from '../../components/Checkbox';
+
+
 function Login(props) {
-  return <div>
-   Login
-  </div>;
+  return (
+ 
+    <div>
+   <div customClass="custom-control custom-control-alternative custom-checkbox">
+    <input customClass="custom-control-input" id="customCheckLogin" type="checkbox" ></input>
+                 </div>
+   
+    </div>           
+  )
 }