gform-react
Back to Examples

Using UI Libraries

Live, editable gform-react examples - plain inputs, Material UI, and PrimeReact.

Every example below is live and editable - it runs against the published gform-react package in your browser. Edit the code and watch the preview update.

Material UI integration

gform-react works with any component library. MUI's <TextField> forwards value, onChange, name, type, and required to its inner <input>, so you spread {...props} directly onto TextField and use MUI's own error / helperText for the message.

Don't use inputProps

Older guides route gform's props through TextField's inputProps. MUI removed inputProps after v6, so on current MUI it's ignored - the input never receives name/value/onChange and gform can't track or validate it. Spread {...props} on the TextField itself instead.

Loading playground…

PrimeReact integration

With PrimeReact, spread props directly onto InputText.

Loading playground…
Bring your own UI

The same pattern works for any library: render your control inside element and forward props (via spread, inputProps, or whatever the component expects). gform handles state and validation; your components handle presentation.