Quick Start

Get started with MinutesForm by setting up 1–3 configuration objects and a handlerFn().

Configs

1. Fields A configuration object defining the fields to be rendered in the form. See detailed documentation on Fields Config.

2. handlerFn() A function to handle form submission.

3. Validation Schema (Optional) A Zod schema used for field validation.

4. defaultFormValues (Optional) Values to prefill the form.

Fields Config Example

export const USER_INFORMATION_FIELDS: IFormField[] = [
  {
    type: 'input',
    data: {
      id: 'firstname',
      name: 'firstname',
      label: 'First Name *',
      type: 'text'
    }
  },
  {
    type: 'input',
    data: {
      id: 'lastname',
      name: 'lastname',
      label: 'Last Name *',
      type: 'text'
    }
  },
  {
    type: 'input',
    data: {
      id: 'email',
      name: 'email',
      label: 'Email *',
      type: 'email'
    }
  },
  {
    type: 'input',
    data: {
      id: 'password',
      name: 'password',
      label: 'Password *',
      type: 'password'
    }
  }
]

Validation config example

import { z } from 'zod'

export const userInformationFormSchema = z.object({
  firstname: z.string().min(1, 'First name is required'),
  lastname: z.string().min(1, 'Last name is required'),
  email: z
    .string()
    .min(1, 'Email is required')
    .email('Invalid email address'),
  password: z
    .string()
    .min(8, 'Password must be at least 8 characters long')
    .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
    .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
    .regex(/[0-9]/, 'Password must contain at least one number')
    .regex(/[@$!%*?&#]/, 'Password must contain at least one special character'),
})

export type TUserInformationSchema = z.infer<typeof userInformationFormSchema>

Default form values config example

const defaultFormValues = {
  firstname: '',
  lastname: '',
  email: '',
  password: '',
}

Handler function example

const handleFormSubmit = async (data: TUserInformationSchema) => {
  <!-- Your API call -->
}

Using Configs in the Form

After setting up the configurations, provide them to the Form component:

<Form
  fields={USER_INFORMATION_FIELDS}
  onFormSubmit={handleFormSubmit}
  validationSchema={userInformationFormSchema}
  defaultFormValues={defaultFormValues}
/>

If everything is configured correctly, your form should render in the browser and handle validation and submission seamlessly.