diff --git a/src/core/CheckBox/CheckBox.stories.tsx b/src/core/CheckBox/CheckBox.stories.tsx
new file mode 100644
index 0000000..07c691a
--- /dev/null
+++ b/src/core/CheckBox/CheckBox.stories.tsx
@@ -0,0 +1,39 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { ThemedBackground } from '../../utils/storybook';
+import { CheckBox } from '../CheckBox';
+
+storiesOf('CheckBox', module)
+ // Litmus Portal
+ .add('Litmus Portal', () => (
+
+
+
+ ))
+
+ // Kubera Chaos
+ .add('Kubera Chaos', () => (
+
+
+
+ ))
+
+ // Kubera Propel
+ .add('Kubera Propel', () => (
+
+
+
+ ))
+ // Kubera Portal
+ .add('Kubera Portal', () => (
+
+
+
+ ))
+
+ // Kubera Core
+ .add('Kubera Core', () => (
+
+
+
+ ));
diff --git a/src/core/CheckBox/CheckBox.tsx b/src/core/CheckBox/CheckBox.tsx
new file mode 100644
index 0000000..3b17913
--- /dev/null
+++ b/src/core/CheckBox/CheckBox.tsx
@@ -0,0 +1,22 @@
+import { Checkbox } from '@material-ui/core';
+import React, { useState } from 'react';
+import CheckOutlinedIcon from '@material-ui/icons/CheckOutlined';
+import { useStyles } from './styles';
+import { CheckboxProps } from '@material-ui/core/Checkbox';
+
+const CheckBox: React.FC = ({ disabled, checked }) => {
+ const classes = useStyles();
+ const [check, setChecked] = useState(checked);
+ return (
+ }
+ disabled={disabled}
+ checked={check}
+ onChange={() => setChecked(!check)}
+ inputProps={{ 'aria-label': 'decorative checkbox' }}
+ />
+ );
+};
+export { CheckBox };
diff --git a/src/core/CheckBox/__tests__/CheckBox.test.tsx b/src/core/CheckBox/__tests__/CheckBox.test.tsx
new file mode 100644
index 0000000..b2dda78
--- /dev/null
+++ b/src/core/CheckBox/__tests__/CheckBox.test.tsx
@@ -0,0 +1,22 @@
+import { render, cleanup } from '@testing-library/react';
+import React from 'react';
+import { KuberaThemeProvider } from '../../../theme';
+import { CheckBox } from '../CheckBox';
+
+afterEach(cleanup);
+jest.useFakeTimers();
+
+describe('CheckBox', () => {
+ it('Renders', () => {
+ const { getByTestId } = render(
+
+
+
+ );
+ const checkbox = getByTestId('checkbox').querySelector(
+ 'input[type="checkbox"]'
+ );
+ expect(checkbox).toHaveProperty('checked', false);
+ expect(checkbox).toHaveProperty('disabled', false);
+ });
+});
diff --git a/src/core/CheckBox/index.ts b/src/core/CheckBox/index.ts
new file mode 100644
index 0000000..5e96750
--- /dev/null
+++ b/src/core/CheckBox/index.ts
@@ -0,0 +1 @@
+export * from './CheckBox';
diff --git a/src/core/CheckBox/styles.ts b/src/core/CheckBox/styles.ts
new file mode 100644
index 0000000..dd22dfb
--- /dev/null
+++ b/src/core/CheckBox/styles.ts
@@ -0,0 +1,41 @@
+import { makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ width: '1.5rem',
+ height: '1.5rem',
+ '& svg': {
+ display: 'none',
+ },
+ },
+ '@global': {
+ '.MuiCheckbox-root': {
+ borderRadius: '0.1875rem',
+ boxShadow: 'none',
+ backgroundColor: 'transparent',
+ borderWidth: '0.03125rem',
+ borderStyle: 'solid',
+ borderColor: theme.palette.border.main,
+ '&:hover': {
+ borderColor: theme.palette.secondary.main,
+ },
+ '&:disabled': {
+ borderColor: theme.palette.disabledBackground,
+ },
+ },
+ '.Mui-checked': {
+ borderColor: theme.palette.secondary.main,
+ '& svg': {
+ display: 'block',
+ },
+ },
+ '.Mui-disabled': {
+ borderColor: theme.palette.text.disabled,
+ },
+ },
+}));
+
+export { useStyles };
diff --git a/src/core/index.ts b/src/core/index.ts
index d943e9f..7e27916 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -1,4 +1,5 @@
export * from './Button';
+export * from './CheckBox';
export * from './ProgressBar';
export * from './Text';
export * from './Pills';