formfusion NPM Version
LearnBlogPlayground

Integration with Chakra UI

Integrating FormFusion with Chakra UI is a straightforward process. To accomplish this, you can use the connect method along with the UseForm hook to initialize your form's configuration.


For a successful implementation of the connect method, you'll need access to the form configuration object and to select the input type or validation pattern that aligns with your requirements.


Important Note: To leverage the potential of the connect method, it's important to call it on the lower-level input component rendered by Chakra UI. This ensures the synchronization of FormFusion with the Chakra UI framework.

Example

import React from "react";
import { Button, Input, Stack, Text } from "@chakra-ui/react";
import { Form, useForm, connect } from "formfusion";

const MyForm = () => {
  const onSubmit = (e) => {
    console.log("Success " + JSON.stringify(e));
  };

  const config = useForm({
    onSubmit,
    validateOnChange: true
  });

  return (
    <Form config={config}>
      <Stack spacing={0}>
        <Input
          {...connect(config, "alphabetic")}
          id="firstName"
          name="firstName"
          isInvalid={Boolean(config.errors.firstName)}
          errorBorderColor="crimson"
          placeholder="Enter your first name"
        />
        <Text fontSize="14px" color="tomato">
          {config.errors.firstName}
        </Text>
      </Stack>
      <Button colorScheme="blue" type="submit">
        Submit
      </Button>
    </Form>
  );
};

export default MyForm;