Forms should be simple and easy to use, but the harsh reality is that React has brought a series of challenges to what is one of the most used forms of interaction on the web. We want to change that, going back to that experience we had with pure HTML forms - but with the flexibility and power of React.

About

This is an original component from Inpulse.

Each piece of a form, be it an Input, Select or Checkbox, can be used as if it were a pure HTML element. DS creates an abstraction layer so that you can put together your form very close to how you would in the pre-React world - without having to deal with states, wrappers, registers, etc. We take care of all that for you.

Under the hood, we’re using React Hook Form to manage the state of the form. The natural consequence of this is a great focus on performance. React Hook Form is based on uncontrolled form elements. This approach eliminates the number of renders that would occur in your application every time the user types something into a form field or makes any interaction with its elements.

In the demo below, you can see the number of renders that occur when a user interacts with a controlled form compared to an uncontrolled form. The difference is staggering.

Uncontrolled Input

Controlled Input

Render
Count000

Furthermore, components assemble faster on the page compared to controlled components, as they carry less baggage with them. All of this results in a faster application.

In addition, we also use Zod - a TypeScript-first library used in form validation using schemas. This means you can be confident that the data you are receiving is exactly what you expect.

Installation

pnpm

pnpm add @inpulse-ui/form

bun

bun add @inpulse-ui/form

yarn

yarn add @inpulse-ui/form

npm

npm install @inpulse-ui/form

API Reference

Root

Contains all form elements.

Prop	Type	Default Value	Required
...props	<UseFormProps>	-	Yes
children	ReactNode	null	Yes
onSubmit	function	-	No

Usage

In just 3 steps, you can create a form with type validation and schema validation.

1. Create a schema

   Define your form fields using a schema with Zod. See Zod documentation for more information.

   import { z } from "zod"
   
   const schema = z.object({
     input: z.string().min(2).max(50),
   });

2. Define the form

   Initiate useForm from react-hook-form to define the form’s methods.

   import { z } from "zod";
   import { useForm } from "react-hook-form";
   import { zodResolver } from "@hookform/resolvers/zod";
   
   const schema = z.object({
     input: z.string().min(2).max(50),
   });
   type schemaTypes = z.infer<typeof schema>;
   
   export function Demo() {
     // 1. Define your form
     const methods = useForm<schemaTypes>({
       resolver: zodResolver(schema),
       defaultValues: { input: "" },
     });
     // 2. Define a submit handler
     function handler(values: schemaTypes) {
       // Do something with the form values.
       // ✅ This will be type-safe and validated.
       console.log(values);
     };
   }

3. Build the form

   Now you can start using DS form components to capture user data. And the best: Much like what you would do with pure HTML, with much less verbose semantics than what you would have with pure React Hook Form and/or other similar libraries.

   import { z } from "zod";
   import { useForm } from "react-hook-form";
   import { zodResolver } from "@hookform/resolvers/zod";
   
   import { Form } from "@inpulse-ui/form";
   import { Input } from "@inpulse-ui/input";
   import { Button } from "@inpulse-ui/button";
   
   const schema = z.object({
     input: z.string().min(2).max(50),
   });
   type schemaTypes = z.infer<typeof schema>;
   
   export function Demo() {
     const methods = useForm<schemaTypes>({
       resolver: zodResolver(schema),
       defaultValues: { input: "" },
     });
     function handler(values: schemaTypes) {
       console.log(values);
     };
     return (
       <Form {...methods} onSubmit={handler}>
         <Input name="input" label="Input" />
         <Button type="submit" label="Submit" />
       </Form>
     );
   }

Done! Now you have a fully accessible, type-safe form with client-side validation. No wrappers, registers, etc. The form you want, the way you always wanted.