✨ Implement checkbox component

Building block for the builder fields that are of boolean type.

src/components/formio/checkbox.stories.tsx

@@ -0,0 +1,32 @@
+import withFormik from '@bbbtech/storybook-formik';
+import {ComponentMeta, ComponentStory} from '@storybook/react';
+
+import Checkbox from './checkbox';
+
+export default {
+  title: 'Formio/Components/Checkbox',
+  component: Checkbox,
+  decorators: [withFormik],
+  parameters: {
+    modal: {noModal: true},
+    formik: {initialValues: {'my-checkbox': false}},
+  },
+  args: {
+    name: 'my-checkbox',
+    label: '',
+    tooltip: '',
+  },
+} as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = args => <Checkbox {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Labeled checkbox',
+};
+
+export const WithToolTip = Template.bind({});
+WithToolTip.args = {
+  label: 'With tooltip',
+  tooltip: 'Hiya!',
+};

src/components/formio/checkbox.tsx

@@ -0,0 +1,27 @@
+import {Field} from 'formik';
+
+import Component from './component';
+import Tooltip from './tooltip';
+
+export interface CheckboxProps {
+  name: string;
+  label?: React.ReactNode;
+  tooltip?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({name, label, tooltip = ''}) => {
+  return (
+    <Component type="checkbox">
+      <div className="form-check checkbox">
+        <label className="form-check-label">
+          <Field name={name} as="input" type="checkbox" className="form-check-input" />
+          <span>{label}</span>
+          {tooltip && ' '}
+          <Tooltip text={tooltip} />
+        </label>
+      </div>
+    </Component>
+  );
+};
+
+export default Checkbox;

src/components/formio/component.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Tooltip from './tooltip';
 
 export interface ComponentProps {
-  type: 'textfield' | 'select'; // TODO: can this be inferred from somewhere?
+  type: 'textfield' | 'select' | 'checkbox'; // TODO: can this be inferred from somewhere?
   required?: boolean;
   label?: React.ReactNode;
   tooltip?: string;