Chakra UI Typescript Formik

baseProps.ts

export interface BaseProps {
  label?: any;
  name: string;
  testid?: string;
  formControlProps?: Omit<FormControlProps, 'children' | 'label'>;
}

FormControl

import {
  FormControl as ChakraFormControl,
  FormControlProps as ChakraFormControlProps,
  FormErrorMessage,
  Text,
  FormLabel,
  FormLabelProps,
} from '@chakra-ui/react';
import React, { ReactNode } from 'react';

export type FormControlProps = Omit<ChakraFormControlProps, 'label'> & {
  name?: string;
  label: any;
  testid?: string;
  touched?: boolean;
  error?: string;
  hideError?: boolean;
  children: ReactNode;
  formLabelProps?: FormLabelProps;
};

export const FormControl = (props: FormControlProps) => {
  const {
    testid,
    touched,
    error,
    my = 4,
    label,
    children,
    hideError,
    name,
    formLabelProps,
    ...rest
  } = props;
  return (
    <ChakraFormControl my={my} isInvalid={touched && !!error} {...rest}>
      {label && (
        <FormLabel
          fontSize="14px"
          fontWeight="400"
          display="flex"
          htmlFor={name}
          {...formLabelProps}
        >
          {label}
        </FormLabel>
      )}
      {children}
      {hideError ? null : <FormErrorMessage>{error}</FormErrorMessage>}
    </ChakraFormControl>
  );
};

RadioGroupControl.tsx

import { RadioGroup, RadioGroupProps, Stack, StackProps } from '@chakra-ui/react';
import { FastField, useFormikContext } from 'formik';
import React, { ReactNode } from 'react';
import { BaseProps } from '../baseProps';
import { FormControl } from '../FormControl/FormControl';

export type RadioGroupControlProps = BaseProps &
  RadioGroupProps & {
    children: ReactNode;
    stackProps?: StackProps;
  };

export const RadioGroupControl = (props: RadioGroupControlProps) => {
  const { children, name, label, formControlProps, stackProps, ...rest } = props;

  return (
    <FormControl name={name} label={label} {...formControlProps}>
      <RadioGroup {...rest}>
        <Stack direction="row" {...stackProps}>
          {children}
        </Stack>
      </RadioGroup>
    </FormControl>
  );
};

export type FormRadioGroupControlProps = Overwrite<RadioGroupControlProps, { name: string }>;

export const FormRadioGroupControl = (props: FormRadioGroupControlProps) => {
  const { name, children, formControlProps, ...rest } = props;
  const { setFieldValue } = useFormikContext();

  return (
    <FastField name={name}>
      {({ field, meta }) => (
        <RadioGroupControl
          {...rest}
          formControlProps={{
            ...formControlProps,
            isInvalid: meta.error && meta.touched,
            ...meta,
          }}
          {...field}
          onChange={(value: string) => setFieldValue(name, value)}
        >
          {children}
        </RadioGroupControl>
      )}
    </FastField>
  );
};