Support For Material-UI

[lnorton89]

Was wondering if you plan on supporting Material-UI in the future.

[randallknutson]

We are adding angular-material in our angular-material-formio right now and would like to do the same for react-formio. Because of the nature of material we have to completely override the rendering functionality of the default renderer. We also are looking into doing materialize instead which is just css instead.

[pierrick]

I would love to see any progress on this ! Any suggestion on the best way to help ?

[randallknutson]

Right now this is on our backlog and not planned on being started anytime soon. In order to make this happen one of three things needs to occur:

1. Enough things get done from our backlog to make this the next highest priority. This is unlikely to happen anytime soon.
2. A customer funds the development of this feature.
3. A community member contributes this feature. If a community member wants to develop this, we would be more than happy to help them get started and answer questions along the way.

[pierrick]

Thanks for the answer ! Number 3 looks a good option as i don't think i can have funds for that but i can buy time for sure. I've started look at the angular module and i'm sure i will have questions about the best way to start. I probably come back to you in middle of next week if it s suit to you

[vijamesDD]

Hi, was there anything further on this? We are also keen to have material-ui styling for formio in a react app.

If there isn't a material-ui template yet for react, would anyone have an idea for a work around?

Couple of things I've looked into as work arounds for applying the Material UI to rendered formio forms are below but neither worked: 1) Overriding the form template per component (https://github.com/formio/formio/issues/788) and passing in html for a material-ui component. This works for rendering the element but because the template override requires an html string, I can't see a way to apply any dynamic styling eg modifying the css for onBlur. Equally, component events such form.on('blur') (https://github.com/formio/formio.js/wiki/Form-Renderer#events) cannot be accessed I assume because the components formio html is now overwritten with my static Material UI html 😞.

2) I've seen in the documentation the concept of creating a custom component (https://github.com/formio/formio.js/wiki/Custom-Components-API) and thought perhaps the Material UI styling could be applied in that way. Has anyone written a custom component using Material UI styling? If this does work it is not an ideal solution considering we would have to write a lot of custom components, extending each of the components that formio currently provides.

[stevenmckinnon]

Is there any updates regarding this?

[travist]

Still no movement on this item. Our development team are currently tied up with other things so this continues to be pretty far down on our development board. I would say that either the community will need to provide a solution, or someone will need to sponsor the development of it if the Form.io development team will take this on in a short timeframe.

[numanbaig]

any news regarding form.io compatibility with Material UI??

[lnorton89]

Honestly it's been easier for me to just pull in formiojs package and use their saveSubmission() method to submit my form with the appropriate names for each field corresponding to the form schema defined in the formio form. I know this isn't really optimal for large forms but these guys don't seem too serious about advancing this beyond "pay us".

import { Formio } from 'formiojs';

let formio = new Formio("https://yourformioinstance.com/formname");

function Contact(props) {
  const [status, setStatus] = useState();

  const onSubmit = ({ name, email, message }) => {
    setStatus({ type: "pending" });
    formio.saveSubmission({
      data: {
        name: name,
        email: email,
        message: message
      }
    }).then((r) => {
      console.log(r)
      setStatus({
        type: "success",
        message: "Thank you! We appreciate your interest."
      });
    }).catch(err => {
      if (err) {
        console.log(err)
        setStatus({
          type: "error",
          message: "There was an issue submitting the contact form. Please try again later."
        });
      }
    });
  };
}

[aryanisml]

Still any update or information of material UI with React integration of form builder.

[heather-formio]

After careful consideration, we are not moving forward with building out Material-UI for @formio/react, but have had people use the Materia Bootswatch Theme for Bootstrap https://bootswatch.com/materia/ instead. Closing this thread. We would welcome an open source contribution for this work if anyone is interested. Thank you everyone for the conversation!

[Vikas-workshop]

i want to use formio in my project but formio uses the bootstrap for cascading the inputs in my project i m using material ui i dont want to use bootstrap in my project now how can i fix this problem guide me