Spaceweb Forms
v3.8.1

Learn More

✨ Simplified way to build any type of form with easy-to-use validation

Experience hassle-free form state handling with useForm hook

Design Docs
  • Refer to this example further understanding
  • Refer to this link for design documentation of spaceweb forms
const {
  values,
  errors,
  touched,
  handleSubmit,
  handleAction,
  scrollToError,
  reset,
  loading,
} = useForm({
  scrollToErrors: true,
  shouldValidateOnBlur: true,
  initialValues: {
    name: 'John Doe', 
  },
  initialErrors: {
    email: "Hold on! This field can't be left blank!",
  },
  validate: async ({ values }) => {
    const emailValidationsResult = validateValues(values.email);
    
    if(emailValidationsResult) {
      return {
        email: emailValidationsResult.error,
      }
    }
    
    return undefined;
  },
  onSubmit: async ({ values }) => {
    try {
      await submitValues({ emailAddresses });
      onSuccess('Form Submitted');
    } catch (e) {
      onError('Please try again');
    }
  },
});

Build performant forms with complex layouts using Form

  • It simplifies the process of building complex layouts.
    • Upload image
  • It's performant.

    • Edit the fields and notice the render indicator

  • It's responsive.

    • Vary the viewport width and witness the fluidity

    Upload image