Figma Login page with react-hook-form and tailwind

Om
2 min readApr 25, 2021

--

The tailwind classes that play a major role in styling the form are.

1. For proper spacing ( margin ) between the child elements of a parent container we can use space-y-[value] for instance space-y-4

![carbon(8).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619146884004/tx9804tc_.png)

2. For animation on buttons

![carbon(7).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619146801366/rNM9Zmu_c.png)

3. To stack the elements we have used flex flex-col items-center justify-center.

— -

# Functionalities

Form handling in React has been made easy-peasy with libraries such as formik and react-hook-form. The later ones v7 is released with some updates in the apis so let’s try to employ those in our application.

## The significant changes are :

1. We no longer have to deal with ref={register} , we can simply use {…register(‘email’)}.

![carbon(3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619146329974/ioXtrQKSJ.png)

2. For basic validation we can pass another object to the register function.

![carbon(4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619146440066/Oc6gKsAgs.png)

3. If you want further validations we can simply do it by passing another argument to the register.

![carbon(5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619146565763/fJdyjgvk4.png)

4. The errors object can be retrieved using formState which is returned by useForm hook provided by react-hook-form.

![carbon(6).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619146677097/SORdFjpGp.png)

— -

# The code snippet.

![carbon(9).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619147158186/OB6oYYLcE.png)

# Sandbox

<iframe src=”https://codesandbox.io/embed/figma-with-react-hook-form-qvsz3?autoresize=1&fontsize=14&hidenavigation=1&theme=dark"
style=”width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;”
title=”figma with react-hook-form”
allow=”accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking”
sandbox=”allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts”
></iframe>

--

--