FormikToggleButton

Basic Usage


import {
    FormikToggleButton,
    FormikToggleButtonLabel,
    FormikToggleButtonOptionGroup,
    FormikToggleButtonOption
} from '@krakentech/coral-formik';
import { Button, Stack } from '@krakentech/coral';
import { Formik, Form } from 'formik';
 
const options = [
    { label: 'Apple 🍎', value: 'apple' },
    { label: 'Orange 🍊', value: 'orange' },
    { label: 'Mango 🥭', value: 'mango' },
];
 
<Formik
    initialValues={{ togglebutton: '' }}
    onSubmit={() => console.log('Submitted')}
    validationSchema={yup.object().shape({
        togglebutton: yup.string().required('Please choose a fruit'),
    })}
>
    <Form method="post">
        <FormikToggleButton
            onBlur={onBlur}
            onChange={onChange}
            onFocus={onFocus}
            {...args}
        >
            <FormikToggleButtonLabel label="Which of these fruit do you prefer?" />
 
            <FormikToggleButtonOptionGroup>
                <Stack gap="xxs">
                    {options.map(({ value, label }) => (
                        <FormikToggleButtonOption
                            value={value}
                            key={value.toString()}
                        >
                            {label}
                        </FormikToggleButtonOption>
                    ))}
                </Stack>
            </FormikToggleButtonOptionGroup>
        </FormikToggleButton>
 
        <Button type="submit">Submit</Button>
    </Form>
</Formik>

Full API

Name	Type	Default
`children`	`ReactNode`
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.	`false`
`fullWidth`	`ResponsiveVariant<boolean>` If `true`, the button will take up the full width of its container.	`false`
`onBlur`	`FocusEventHandler<HTMLButtonElement>` Callback fired when the toggle button loses user focus.
`onChange`	`(e: MouseEvent<HTMLButtonElement, MouseEvent>, value: ToggleValue) => void` Callback fired each time the user clicks a toggle button. `event` The event source of the callback. `value` The value of the toggle button that was clicked.
`onFocus`	`FocusEventHandler<HTMLButtonElement>` Callback fired each time the user focuses on a toggle button.
`optional`	`boolean` Add an optional flag to the label for this field (controlled by https://coral-oe.vercel.app/?path=/docs/guides-configuration—docs#overrides-optional-indicator optionalIndicator). This should be set to true if you have set this field to be optional in your validation schema.	`false`
`size`	`"small" \| "medium"` The size of the ToggleButton, which affects its padding.	`medium`
`name`	`string`
`validate`	`FieldValidator \| undefined` An optional field level validation function. See Formik docs for more details