Chakra UI + React Hook Form

This example shows how to build a simple form with Chakra UI's form components and the React Hook Form form library:

import { useForm } from "react-hook-form";
import React from "react";
import {
FormErrorMessage,
FormLabel,
FormControl,
Input,
Button
} from "@chakra-ui/react";
export default function HookForm() {
const {
handleSubmit,
register,
formState: { errors, isSubmitting }
} = useForm();
function onSubmit(values) {
return new Promise((resolve) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
resolve();
}, 3000);
});
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<FormControl isInvalid={errors.name}>
<FormLabel htmlFor="name">First name</FormLabel>
<Input
id="name"
placeholder="name"
{...register("name", {
required: "This is required",
minLength: { value: 4, message: "Minimum length should be 4" }
})}
/>
<FormErrorMessage>
{errors.name && errors.name.message}
</FormErrorMessage>
</FormControl>
<Button mt={4} colorScheme="teal" isLoading={isSubmitting} type="submit">
Submit
</Button>
</form>
);
}

Wiring up to the rest of your app:

import React from "react";
import ReactDOM from "react-dom";
import HookForm from "./HookForm";
import { ChakraProvider, CSSReset, Box } from "@chakra-ui/react";
function App() {
return (
<ChakraProvider>
<CSSReset />
<Box p={4}>
<HookForm />
</Box>
</ChakraProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

credit: Abhishek Kumar Singh - https://abheist.com/

Explore on Code Sandbox

Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel