formfusion NPM Version
LearnBlogPlayground

Integration with Material UI

Integrating FormFusion with Material 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 Material UI. This ensures the synchronization of FormFusion with the Material UI framework.

Example

import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import { Form, useForm, connect } from 'formfusion';

const MyForm = () => {
  const config = useForm({
    onSubmit: (e) => {
      console.log('Success ' + JSON.stringify(e));
    },
    validateOnChange: true,
  });

  return (
    <Form config={config}>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <TextField
            inputProps={{ ...connect(config, 'alphabetic') }}
            id="firstName"
            name="firstName"
            label="First name"
            variant="outlined"
            error={Boolean(config.errors.firstName)}
            helperText={config.errors.firstName}
          />
        </Grid>
        <Grid item xs={12}>
          <Button type="submit" variant="contained">
            Submit
          </Button>
        </Grid>
      </Grid>
    </Form>
  );
};

export default MyForm;