React Final Form + Chakra UI

Checkbox.tsx

import {
  Checkbox,
  FormControl,
  FormControlProps,
  FormErrorMessage,
  // FormLabel,
  InputProps,
} from "@chakra-ui/core"
import React, { PropsWithoutRef } from "react"
import { useField } from "react-final-form"

interface CheckboxFieldProps extends PropsWithoutRef<InputProps> {
  /** Field name. */
  name: string
  /** Field label. */
  label?: string
  isDisabled?: boolean
  outerProps?: PropsWithoutRef<FormControlProps>
}

const CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(
  ({ name, label, placeholder, isDisabled, outerProps, ...props }, ref) => {
    const {
      input,
      meta: { touched, error, submitError, submitting },
    } = useField(name)

    const normalizedError = Array.isArray(error) ? error.join(", ") : error || submitError

    return (
      <FormControl isInvalid={touched && normalizedError} isDisabled={isDisabled} {...outerProps}>
        {/* {label && <FormLabel htmlFor={name}>{label}</FormLabel>} */}
        <Checkbox {...input} id={name} {...props} ref={ref} isDisabled={submitting}>
          {label}
        </Checkbox>
        <FormErrorMessage>{normalizedError}</FormErrorMessage>
      </FormControl>
    )
  }
)

export default CheckboxField

simpler.tsx

export const CheckboxControl = ({ name, children }) => {
  const {
    input: { checked, value, ...input },
    meta: { error, submitError, touched, invalid },
  } = useField(name)
  return (
    <FormControl isInvalid={touched && invalid} my={4}>
      <Checkbox isChecked={value} {...input} isInvalid={touched && invalid} my={4}>
        {children}
      </Checkbox>
      <FormErrorMessage>{error || submitError}</FormErrorMessage>
    </FormControl>
  )
}