Chakra UI Bindings for react-hook-form

Bindings for using react-hook-form with Chakra UI.

Getting started

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-hook-form chakra-ui-react-hook-form

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion react-hook-form chakra-ui-react-hook-form

import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import {
  InputControl,
  NumberInputControl,
  TextareaControl,
  SubmitButton,
} from 'chakra-ui-react-hook-form';
import { useForm } from 'react-hook-form';

const infoFormValidationSchema = Yup.object({
  firstName: Yup.string().required(),
  lastName: Yup.string().required(),
  description: Yup.string().required(),
  age: Yup.number().required(),
});

type InfoFormValues = Yup.InferType<typeof infoFormValidationSchema>;

const InfoForm = () => {
  const { control, handleSubmit } = useForm<InfoFormValues>({
    defaultValues: {
      firstName: '',
      lastName: '',
      description: '',
      age: 0,
    },
    resolver: yupResolver(infoFormValidationSchema),
  });

  const onSubmit = (values: InfoFormValues) => {
    console.log({ values });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <InputControl control={control} name="firstName" label="First name:" />
      <InputControl control={control} name="lastName" label="Last name:" />
      <NumberInputControl control={control} name="age" label="Age:" />
      <TextareaControl control={control} name="description" label="Description:" />
      <SubmitButton control={control} />
    </form>
  );
};

Roadmap

Components

Input (valueAsNumber, valueAsDate, setValueAs)
Textarea
Checkbox (<CheckboxGroup/>)
- [] Standalone <Checkbox>
Number Input
Radio (<RadioGroup/>)
Select
[] Progress
[] Pin Input

Utility Components

Submit button

Extras