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 {
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 * as ReactDOM from 'react-dom/client'
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.createRoot(rootElement).render(<App />)

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

Explore on Code Sandbox

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel