Using UI Libraries
Live, editable gform-react examples - plain inputs, Material UI, Mantine, 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.
Note that TextField only forwards that known set — native constraints outside it (like pattern,
minLength) land on the wrapper element and never reach the <input>. To enforce a stricter email
rule, keep type="email" (it's semantically correct and sets the right mobile keyboard) and
forward the pattern through MUI's slotProps.htmlInput so it actually reaches the input:
slotProps={{ htmlInput: { pattern } }}. gform reports the stricter patternMismatch over the
weaker typeMismatch, so pair it with withPatternMismatchMessage.
Older guides route gform's props through TextField's inputProps. MUI v6 deprecated it (removed
later) in favor of slotProps: inputProps → slotProps.htmlInput (the native <input>) and
InputProps → slotProps.input (the MUI Input wrapper). Spread {...props} on the TextField
itself for the common wiring (value/onChange/name/type/required), and use
slotProps={{ htmlInput: { … } }} for native constraints TextField doesn't forward (pattern,
minLength, …).
The email keeps type="email" for semantics/keyboard while pattern carries the real rule — gform
reports the stricter patternMismatch over typeMismatch. See
Constraint Validation for why.
Mantine integration
Mantine's <TextInput> has first-class label / placeholder / error props, and — unlike MUI —
spreads every other prop straight onto the inner <input>. That includes native constraints, so a
plain {...props} spread carries pattern through with no extra slot. Wrap the app in
<MantineProvider> and import Mantine's stylesheet.
PrimeReact integration
With PrimeReact, spread props directly onto InputText.
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.