diff --git a/src/components/formio/checkbox.stories.tsx b/src/components/formio/checkbox.stories.tsx new file mode 100644 index 00000000..3bbc3b72 --- /dev/null +++ b/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; + +const Template: ComponentStory = args => ; + +export const Default = Template.bind({}); +Default.args = { + label: 'Labeled checkbox', +}; + +export const WithToolTip = Template.bind({}); +WithToolTip.args = { + label: 'With tooltip', + tooltip: 'Hiya!', +}; diff --git a/src/components/formio/checkbox.tsx b/src/components/formio/checkbox.tsx new file mode 100644 index 00000000..e42fe589 --- /dev/null +++ b/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 = ({name, label, tooltip = ''}) => { + return ( + +
+ +
+
+ ); +}; + +export default Checkbox; diff --git a/src/components/formio/component.tsx b/src/components/formio/component.tsx index 5830d02a..c95a7e5d 100644 --- a/src/components/formio/component.tsx +++ b/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;