Graneet Form

Simple and performant form library built with performance in mind.
Zero dependencies, easy to use, with built-in wizard system.

🚀 Quick Start

GitHub

Why Choose Graneet Form?

🚀

Performant

Built with performance in mind. You will not have unwanted renders.

🌈

Easy to use

API is built to be as simple as possible.

📦

Small bundle size

Zero dependencies for optimal bundle size.

🗒️

Built-in Wizard system

Simply build interfaces with steps where each step has a form.

Get Started in Seconds

Graneet Form provides a simple yet powerful API for building forms with TypeScript support and granular subscriptions.

import { useForm, Form, Field, Rule } from 'graneet-form';

interface ContactForm {
  name: string;
  email: string;
}

const ContactFormExample = () => {
  const form = useForm<ContactForm>({
    defaultValues: { name: '', email: '' }
  });

  return (
    <Form form={form} onSubmit={form.handleSubmit(console.log)}>
      <Field name="name" render={(props, state) => (
        <div>
          <input {...props} placeholder="Name" />
          {state.validationStatus.status === 'invalid' && (
            <span className="error">{state.validationStatus.message}</span>
          )}
        </div>
      )}>
        <Rule validationFn={(value) => !!value} message="Name is required" />
      </Field>
      
      <Field name="email" render={(props, state) => (
        <div>
          <input {...props} placeholder="Email" type="email" />
          {state.validationStatus.status === 'invalid' && (
            <span className="error">{state.validationStatus.message}</span>
          )}
        </div>
      )}>
        <Rule validationFn={(v) => v?.includes('@')} message="Valid email required" />
      </Field>
      
      <button type="submit">Submit</button>
    </Form>
  );
};

import { useForm, Form, Field, Rule } from 'graneet-form';interface ContactForm {  name: string;  email: string;}const ContactFormExample = () => {  const form = useForm<ContactForm>({    defaultValues: { name: '', email: '' }  });  return (    <Form form={form} onSubmit={form.handleSubmit(console.log)}>      <Field name="name" render={(props, state) => (        <div>          <input {...props} placeholder="Name" />          {state.validationStatus.status === 'invalid' && (            <span className="error">{state.validationStatus.message}</span>          )}        </div>      )}>        <Rule validationFn={(value) => !!value} message="Name is required" />      </Field>            <Field name="email" render={(props, state) => (        <div>          <input {...props} placeholder="Email" type="email" />          {state.validationStatus.status === 'invalid' && (            <span className="error">{state.validationStatus.message}</span>          )}        </div>      )}>        <Rule validationFn={(v) => v?.includes('@')} message="Valid email required" />      </Field>            <button type="submit">Submit</button>    </Form>  );};

📚 See Full Documentation →