Switch initially checked

Given the following truncated example, I would expect the switch to be initially turned on:

import { Switch } from 'formik-material-ui';

initialValues = { myField: true }

<FormControlLabel
	control={<Field name="myField" type="checkbox" component={Switch} />}
	label="My Field"
/>

I noticed issue #41 and PR #42 but couldn’t get it to work out of the box.

I added some logs to the Switch component, and noticed that field.value === undefined. So I added value={values.myField} as a prop to the Field, and it works now. Not sure if this is how it’s supposed to work.

Working version:

<Formik render={({ values }) =>
    <form>
        <FormControlLabel
            control={<Field name="myField" value={values.myField} type="checkbox" component={Switch} />}
            label="My Field"
        />
    </form>
</Formik>

versions:

@material-ui/core@3.9.3
formik-material-ui@0.0.16
react@16.8.6

[edorivai]

Oh god, it’s the type="checkbox". Just confirmed it in your sandbox.

[sachintbits]

You can access setFieldValue and values from render props.

<Switch checked={values.offer} onChange={(e) => { setFieldValue( 'offer', e.target.checked, false ) }} color="primary" name="offer" inputProps={{ 'aria-label': 'offer status' }} />

Whenever you need to modify the values check to see the available helper functions. Most of the use cases will be ready to use. If you couldn’t find any way, then create your own.