chakra-ui-react-hook-form

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

Or

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

import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import {
  InputControl,
  NumberInputControl,
  TextareaControl,
  SubmitButton,
} from 'chakra-ui-react-hook-form';
import { useForm } from 'react-hook-form';

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

type InfoFormValues = z.infer<typeof infoFormValidationSchema>;

const InfoForm = () => {
  const { control, handleSubmit } = useForm<InfoFormValues>({
    defaultValues: {
      firstName: '',
      lastName: '',
      description: '',
      age: 0,
    },
    resolver: zodResolver(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

Chakra Components

• Input (valueAsNumber, valueAsDate, setValueAs, Left/Right Addon/Element)
• Textarea
• CheckboxGroup
  • Checkbox (Standalone <Checkbox />)
• Number Input
• Radio (<RadioGroup/>)
• Select
• Progress
• Pin Input

Utility Components

• Submit button

Extras

• Select (using chakra-react-select)
• File input
• Image input (zoom & crop)