Codesandbox example: https://codesandbox.io/s/formik-mantine-showroom-46h1jx

Simple declarative bindings for Mantine and Formik.

Getting started

npm install formik-mantine

Example

1import React from "react"
2import { NotificationsProvider } from "@mantine/notifications"
3import {
4  TextInput,
5  Textarea,
6  PasswordInput,
7  Input,
8  Checkbox,
9  Switch,
10  NumberInput,
11  Slider,
12  Select,
13  RadioGroup,
14  Chips,
15  MultiSelect,
16  SubmitButton,
17} from "formik-mantine"
18import { Radio, Chip } from "@mantine/core"
19import { Formik } from "formik"
20
21function App() {
22  return (
23    <NotificationsProvider>
24      <Formik
25        initialValues={{
26          // default form values
27          value1: "hello",
28          value2: true,
29          value3: 5,
30          value4: null,
31          value5: ["react", "svelte", "vue"],
32        }}
33        onSubmit={(values) => {
34          console.log({ values })
35          showNotification({
36            title: "Submit",
37            message: <pre>{JSON.stringify(values)}</pre>,
38          })
39        }}
40      >
41        <form>
42          <TextInput label="TextInput" name="value1" />
43          <Textarea label="Textarea" name="value1" />
44          <PasswordInput label="PasswordInput" name="value1" />
45          <Input name="value1" />
46          <Checkbox name="value2" />
47          <Switch name="value2" />
48          <NumberInput name="value3" label="NumberInput" />
49          <Slider name="value3" label="Slider" />
50          <Select
51            name="value4"
52            label="Select (value4)"
53            data={["val1", "val2", "val3"]}
54          />
55          <RadioGroup name="value4" label="RadioGroup (value4)">
56            <Radio value="val1" label="val1" />
57            <Radio value="val2" label="val2" />
58            <Radio value="val3" label="val3" />
59          </RadioGroup>
60          <Chips name="value4">
61            <Chip value="val1">val1</Chip>
62            <Chip value="val2">val2</Chip>
63            <Chip value="val3">val3</Chip>
64          </Chips>
65          <MultiSelect
66            name="value5"
67            label="MultiSelect (value5)"
68            data={["val1", "val2", "val3", "react", "svelte", "vue"]}
69          />
70          <Chips name="value5" multiple={true}>
71            {["val1", "val2", "val3", "react", "svelte", "vue"].map((v) => (
72              <Chip key={v} value={v}>
73                {v}
74              </Chip>
75            ))}
76          </Chips>
77          <SubmitButton>Submit</SubmitButton>
78        </form>
79      </Formik>
80    </NotificationsProvider>
81  )
82}

Core Concept

This library enriches several Mantine components with a required name: string prop that connects them to a Formik form field. It is quite simple. Instead of importing your form components from Mantine, you need to import them from 'formik-mantine' and set their name prop. Now the component is connected/synced with the corresponding Formik field!

Otherwise the original api and functionality of the components stay the same.