diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
new file mode 100644
index 0000000..3a8f373
--- /dev/null
+++ b/src/Checkbox/index.js
@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React, { useRef, useEffect } from 'react';
+
+const Checkbox = ({ id, label, indeterminate, ...rest }) => {
+ const inputRef = useRef();
+ useEffect(() => {
+ inputRef.current.indeterminate = indeterminate;
+ }, [indeterminate]);
+
+ return (
+
+
+
+
+ );
+};
+
+Checkbox.propTypes = {
+ checked: PropTypes.bool.isRequired,
+ id: PropTypes.string.isRequired,
+ disabled: PropTypes.bool,
+ indeterminate: PropTypes.bool,
+ required: PropTypes.bool,
+ label: PropTypes.bool,
+ name: PropTypes.string,
+ onChange: PropTypes.func,
+};
+
+export default Checkbox;
diff --git a/src/Checkbox/stories.js b/src/Checkbox/stories.js
new file mode 100644
index 0000000..6728c7d
--- /dev/null
+++ b/src/Checkbox/stories.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+
+import Checkbox from './index';
+
+storiesOf('Checkbox', module).add('All Knobs', () => {
+ let label = text('label', 'check me out');
+ let checked = boolean('checked', false);
+ let disabled = boolean('disabled', false);
+ let indeterminate = boolean('indeterminate', false);
+ let required = boolean('required', false);
+ return (
+
+ );
+});
diff --git a/src/Radio/RadioSet.js b/src/Radio/RadioSet.js
new file mode 100644
index 0000000..a29383a
--- /dev/null
+++ b/src/Radio/RadioSet.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const RadioSet = ({ className, children, ...rest }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+RadioSet.propTypes = {
+ children: PropTypes.node,
+};
+
+export default RadioSet;
diff --git a/src/Radio/index.js b/src/Radio/index.js
new file mode 100644
index 0000000..00c095f
--- /dev/null
+++ b/src/Radio/index.js
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Radio = ({ id, label, className, ...rest }) => {
+ return (
+
+
+
+
+ );
+};
+
+Radio.propTypes = {
+ checked: PropTypes.bool.isRequired,
+ id: PropTypes.string.isRequired,
+ disabled: PropTypes.bool,
+ required: PropTypes.bool,
+ label: PropTypes.bool,
+ name: PropTypes.string,
+ onChange: PropTypes.func,
+};
+
+export default Radio;
diff --git a/src/Radio/stories.js b/src/Radio/stories.js
new file mode 100644
index 0000000..222d4c7
--- /dev/null
+++ b/src/Radio/stories.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+
+import Radio from './index';
+import RadioSet from './RadioSet';
+
+storiesOf('Radio', module)
+ .add('All Knobs', () => {
+ let label = text('label', 'Radio Label');
+ let checked = boolean('checked', false);
+ let disabled = boolean('disabled', false);
+ let required = boolean('required', false);
+ return (
+
+ );
+ })
+ .add('Radio Set', () => {
+ let checked = boolean('default checked', false);
+ let disabled = boolean('disabled', false);
+ let required = boolean('required', false);
+ return (
+
+
+
+
+ );
+ });
diff --git a/src/index.mjs b/src/index.mjs
index de07366..cfaeea6 100644
--- a/src/index.mjs
+++ b/src/index.mjs
@@ -1,26 +1,33 @@
/* Export helix-react definition */
import Alert from './Alert';
import Button from './Button';
+import Checkbox from './Checkbox';
import ChoiceTile from './ChoiceTile';
import Drawer from './Drawer';
import Icon from './Icon';
import Modal from './Modal';
import Popover from './Popover';
import Tooltip from './Tooltip';
-import Select from './Select';
+import Radio from './Radio';
+import RadioSet from './Radio/RadioSet';
import Search from './Search';
import SearchAssist from './Search/SearchAssist';
+import Select from './Select';
+
export default {
Alert,
Button,
+ Checkbox,
ChoiceTile,
Drawer,
Icon,
Modal,
Popover,
- Select,
Tooltip,
+ Radio,
+ RadioSet,
Search,
- SearchAssist
+ SearchAssist,
+ Select,
};