common Checkboc component uses button input instead of checkbox

src/common/Checkbox/Checkbox.js

@@ -7,18 +7,10 @@ const styles = require('./styles');
 
 const Checkbox = React.forwardRef(({ className, checked = false, disabled = false, onClick, children }, ref) => {
     return (
-        <div className={classnames(className, styles['checkbox-container'], { 'checked': checked }, { 'disabled': disabled })} onClick={onClick}>
-            <Input
-                ref={ref}
-                className={styles['native-checkbox']}
-                type={'checkbox'}
-                disabled={disabled}
-                checked={checked}
-                readOnly={true}
-            />
+        <Input ref={ref} className={classnames(className, styles['checkbox-container'], { 'checked': checked }, { 'disabled': disabled })} type={'button'} onClick={!disabled ? onClick : null}>
             <Icon className={styles['icon']} icon={checked ? 'ic_check' : 'ic_box_empty'} />
-            {React.isValidElement(React.Children.only(children)) ? children : null}
-        </div>
+            {React.isValidElement(children) ? children : null}
+        </Input>
     );
 });
 
@@ -29,7 +21,10 @@ Checkbox.propTypes = {
     checked: PropTypes.bool,
     disabled: PropTypes.bool,
     onClick: PropTypes.func,
-    children: PropTypes.node
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ])
 };
 
 module.exports = Checkbox;

src/common/Checkbox/styles.less

@@ -1,7 +1,4 @@
 .checkbox-container {
-    position: relative;
-    z-index: 0;
-
     &:global(.checked) {
         .icon {
             padding: calc(0.1 * var(--icon-size));
@@ -15,14 +12,4 @@
         fill: var(--icon-color);
         background-color: var(--icon-background-color);
     }
-
-    .native-checkbox {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 0;
-        height: 0;
-        opacity: 0;
-        z-index: -1;
-    }
 }