FormikRadio

Basic Usage


import { FormikRadio, FormikRadioOption } from '@krakentech/coral-formik';
import { Button } from '@krakentech/coral';
import { Formik, Form } from 'formik';
 
<Formik
    initialValues={{ radio: null }}
    onSubmit={() => console.log('Submitted')}
    validationSchema={yup.object().shape({
        radio: yup.string().required('This field is required'),
    })}
>
    <Form method="post">
        <FormikRadio name="radio" title="My radio group">
            <FormikRadioOption value="first">First item</FormikRadioOption>
            <FormikRadioOption value="second">Second item</FormikRadioOption>
            <FormikRadioOption value="third">Third item</FormikRadioOption>
        </FormikRadio>
        <Button type="submit">Submit</Button>
    </Form>
</Formik>

Full API

Name	Type	Default
`children`	`ReactNode`
`name`	`string` The field name used on the POST request when the form is submitted.
`title`	`ReactNode` A title for this group of radio buttons.
`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`
`theme`	`ResponsiveVariant<"tertiary500" \| "secondary500">` The colourway applied to this component.	`tertiary500`
`onChange`	`(event: ChangeEvent<HTMLInputElement>, value: string) => void` Callback fired each time the user selects a radio button. `event` The event source of the callback. `value` The value of the selected radio button.
`onBlur`	`FocusEventHandler<HTMLInputElement>` Callback fired when the radio group loses user focus.
`disabled`	`boolean` If `true`, the entire component will be disabled and not respond to user interactions.	`false`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`validate`	`FieldValidator \| undefined` An optional field level validation function. See Formik docs for more details