Form

0.0.6

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. 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 wrappers, registers, etc. We take care of all that for you.

About

Under the hood, we use React Hook Form (opens in a new tab) 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 forms. 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 data changes. 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 (opens in a new tab).

In addition, we also use Zod (opens in a new tab) - 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 add @inpulse-ds/form

Usage

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

Create a schema

Define your form fields using a schema with Zod. See Zod documentation (opens in a new tab) for more information.

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

Define the form

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

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "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);
  };
}

Build the form

Now you can use DS form components to build the form of your dreams. 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 { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
 
import { Form } from "@inpulse-ds/form";
import { Input } from "@inpulse-ds/input";
import { Button } from "@inpulse-ds/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.

Tooltip Slot