FormikSwitch

Basic Usage


import { FormikSwitch, FormikSwitchInput, FormikSwitchLabel } from '@krakentech/coral-formik';
import { Button, Stack } from '@krakentech/coral';
import { Formik, Form } from 'formik';
 
<Formik
    initialValues={{ switch: false }}
    onSubmit={() => console.log('Submitted')}
    validationSchema={yup.object().shape({
        switch: yup
            .boolean()
            .required('Please use Coral')
            .oneOf([true], 'Please use Coral'),
    })}
>
    <Form method="post">
        <FormikSwitch name="switch">
            <Stack alignItems="center" gap="none">
                <FormikSwitchInput />
                <FormikSwitchLabel label="Use Coral" />
            </Stack>
        </FormikSwitch>
        <Button type="submit">Submit</Button>
    </Form>
</Formik>

Full API

Name	Type	Default
`behaviour`	`"toggle" \| "switch" \| undefined` The behaviour of the switch, either a toggle or a switch. Toggle will be styled such that there is no on and off state, it simply moves the active state from one side to the other.	`switch`
`children`	`React.ReactNode`
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.
`id`	`string` The ID to be set on the switch.
`name`	`string` The field name used on the POST request when the form is submitted.
`onBlur`	`FocusEventHandler<HTMLInputElement>` Callback fired when the switch loses user focus.
`onChange`	`(event: ChangeEvent<HTMLInputElement>, isChecked: boolean) => void` Callback fired each time the user checks or unchecks the switch. `event` The event source of the callback. `isChecked` The checked state of the switch.
`theme`	`"tertiary500" \| "secondary500" \| undefined` The colour of the Switch	`tertiary500`
`validate`	`FieldValidator \| undefined` An optional field level validation function. See Formik docs for more details