Add SwitchWithLabel component

docs/docs/api/material-ui.md

@@ -148,6 +148,23 @@ import { Switch } from 'formik-material-ui';
 
 #### [Material-UI Documentation](https://material-ui.com/api/switch/)
 
+## SwitchWithLabel
+
+A convenience wrapper that adds label to Switch using FormControlLabel. Supports all the same properties as Switch and accepts an additional `Label` prop, which are props applied to FormControlLabel.
+
+#### Example
+
+```jsx
+import { SwitchWithLabel } from 'formik-material-ui';
+
+<Field
+  component={SwitchWithLabel}
+  type="checkbox"
+  name="checked"
+  Label={{ label: 'Switch' }}
+/>;
+```
+
 ## TextField
 
 #### Example

packages/formik-material-ui/src/SwitchWithLabel.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import MuiSwitch from '@material-ui/core/Switch';
+import FormControlLabel, {
+  FormControlLabelProps as MuiFormControlLabelProps,
+} from '@material-ui/core/FormControlLabel';
+import { FieldProps } from 'formik';
+
+import { SwitchProps, fieldToSwitch } from './Switch';
+
+/**
+ * Exclude props that are passed directly to the control
+ * https://github.com/mui-org/material-ui/blob/v3.1.1/packages/material-ui/src/FormControlLabel/FormControlLabel.js#L71
+ */
+export interface SwitchWithLabelProps extends FieldProps, SwitchProps {
+  Label: Omit<
+    MuiFormControlLabelProps,
+    'checked' | 'name' | 'onChange' | 'value' | 'control'
+  >;
+}
+
+export function SwitchWithLabel<Val = unknown>({
+  Label,
+  ...props
+}: SwitchWithLabelProps) {
+  return (
+    <FormControlLabel
+      control={<MuiSwitch {...fieldToSwitch(props)} />}
+      {...Label}
+    />
+  );
+}
+
+SwitchWithLabel.displayName = 'FormikMaterialUISwitchWithLabel';

packages/formik-material-ui/src/main.ts

@@ -1,5 +1,6 @@
 export * from './TextField';
 export * from './Switch';
+export * from './SwitchWithLabel';
 export * from './Checkbox';
 export * from './CheckboxWithLabel';
 export * from './Select';

stories/Switches.story.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
 import { Formik, Form, Field } from 'formik';
 import { action } from '@storybook/addon-actions';
 
 import Wrapper from './Wrapper';
 import FormValues from './FormValues';
 
-import { Switch } from '../packages/formik-material-ui/src/main';
+import {
+  Switch,
+  SwitchWithLabel,
+} from '../packages/formik-material-ui/src/main';
 import { Box } from '@material-ui/core';
 
 export default () => (
@@ -31,46 +33,34 @@ export default () => (
           <br />
           <Field component={Switch} name="off" type="checkbox" />
           <br />
-          <FormControlLabel
-            label="Switch With Label"
-            control={
-              <Field component={Switch} name="withLabel" type="checkbox" />
-            }
+          <Field
+            component={SwitchWithLabel}
+            Label={{ label: 'Switch With Label' }}
+            name="withLabel"
+            type="checkbox"
           />
           <br />
           <Box>
-            <FormControlLabel
-              label="Designer?"
-              control={
-                <Field
-                  component={Switch}
-                  name="multiple"
-                  value="designer"
-                  type="checkbox"
-                />
-              }
+            <Field
+              component={SwitchWithLabel}
+              Label={{ label: 'Designer?' }}
+              name="multiple"
+              value="designer"
+              type="checkbox"
             />
-            <FormControlLabel
-              label="Developer?"
-              control={
-                <Field
-                  component={Switch}
-                  name="multiple"
-                  value="developer"
-                  type="checkbox"
-                />
-              }
+            <Field
+              component={SwitchWithLabel}
+              Label={{ label: 'Developer?' }}
+              name="multiple"
+              value="developer"
+              type="checkbox"
             />
-            <FormControlLabel
-              label="Product Manager?"
-              control={
-                <Field
-                  component={Switch}
-                  name="multiple"
-                  value="product"
-                  type="checkbox"
-                />
-              }
+            <Field
+              component={SwitchWithLabel}
+              Label={{ label: 'Product Manager?' }}
+              name="multiple"
+              value="product"
+              type="checkbox"
             />
           </Box>
           <Button variant="contained" color="primary" onClick={submitForm}>