Questions tagged [formik-material-ui]

This tag is reserved for Q&A on integrating and using Formik and Material-UI (MUI) with each other in React forms. The two are often used together, with Formik providing validation logic while MUI components, such as TextField, control the visual presentation.

This tag is reserved for Q&A on integrating and using Formik and Material-UI (MUI) with each other in React forms. The two are often used together, with Formik providing validation logic while MUI components, such as TextField, control the visual presentation.

In a nutshell:

Formik is a small React form library, and MUI is a more extensive React component library.

The critical benefit achieved from pairing these two is the separation of the presentation layer (MUI) from the data-handling logic (Formik).

Material-UI's TextField API lets us control the data it displays while focusing on its presentation. It enables the component's value, onChange function, onBlur event handlers, helperText, and error status to be externally controlled.

Formik, on the other hand, controls the flow of form data around the form, most notably through the validation. By combining the power of both, you have a React form with validation that can be quickly developed and maintained.

Resources:

Material-UI: Getting Started

Formik: Getting Started

Formik & MUI Example Integrations

166 questions
7
votes
1 answer

formik-material-ui not working for TogglleButtonGroup Component

In my React code, along with other input types, I also have to use ToggleButtonGroup component of material-ui. This component is not directly supported by formik-material-ui and I've been trying to write a custom wrapper without much success. This…
Vikalp Jain
  • 583
  • 2
  • 11
  • 25
6
votes
1 answer

How to display initialValues for material-ui autocomplete field?

I use the autocomplete field of material-ui (v5) and formik to generate my forms. On this form, I have some lists defined as constants. I use an api to get the default value of this list. This api returns only the "code" of the option but not its…
darkvodka
  • 303
  • 1
  • 3
  • 11
6
votes
1 answer

how to use material-ui select field with formik?

I'm tryin to use formik with material-ui Textfield componet with select attr, everytime i change option it gives me this Warning Material-UI: You have provided an out-of-range value null for the select (name="subIndicatorId") component. Consider…
6
votes
4 answers

Material UI Toggle Button - can't change background color when selected

I'm trying to use the Material UI Toggle Button kind of like a radio button to give the user 2 choices to a given question. It's functioning mostly as expected, but when trying to adjust the style for when each toggle button is selected, I can't get…
Sam Goodman
  • 61
  • 1
  • 2
6
votes
2 answers

Formik Material UI React - Autocomplete - uncontrolled to controlled state

I'm trying to figure out how to follow the instructions in the documentation for the Autocomplete field of the Formik, Material UI, React tool here. The example given in the documentation is: import { Autocomplete } from…
Mel
  • 2,481
  • 26
  • 113
  • 273
5
votes
1 answer

material-ui form label positions

Making a form with Material-ui + react. Is there a way to layout the labels to the side of input fields? It's much more readable. so like this: name [input] title [input] rather than name [input] title [input] I can only find fields that…
dcsan
  • 11,333
  • 15
  • 77
  • 118
4
votes
1 answer

MUI & Formik: Validation doesn't trigger for useField

Codesandbox with minimal working example: https://codesandbox.io/s/mystifying-lake-m0oxc?file=/src/DemoForm.tsx Essentially, I have a AutoComplete dropdown which is tied into a Formik form with the useField hook. This sets the value correctly on any…
4
votes
5 answers

Formik resetting form to initial values

I am using Formik and have the following setup below where I want to be able to reset the form when the user presses the "Cancel" button. On return to the form, all form values should be reset to initialValues which are all nulls.
ArthurJ
  • 777
  • 1
  • 14
  • 39
4
votes
1 answer

Why does AccordionSummary background change to grey when clicking inside TextField in Material-UI?

I am using Material-UI's Accordion and inside AccordionSummary I have a (which is actually controlled by Formik and formik-material-ui) and the background of AccordionSummary turns grey when clicking inside the field only. I don't want…
Anthony
  • 317
  • 1
  • 5
  • 23
3
votes
1 answer

Mui TextField placeholder is displayed with value on first refresh

I'm getting this weird behavior that I don't know how to solve, on edit mode of this form if I refresh the page I get a bug where both the value and the placeholder are displayed in the field -- This is my form component const Form = () => { //…
Lazybob
  • 224
  • 3
  • 10
3
votes
0 answers

Formik form is being reset to initial values after API call

I have a MaterialUI Autocomplete field with some called from API. Near that field I have a button that calls API to refresh options (to load new, if some were created). But, somehow all other fields are being dropped to initial values. I know that…
3
votes
1 answer

TypeError: Cannot read property 'setFieldValue' of undefined. Formik doesn't recognise setFieldValue

I'm trying to create an image upload on my form. The problem is when I try to change the value to the actual uploaded file. I am trying to use setFieldValue, but it says it is undefined. Below is the code. Any ideas why it is undefined? I thought it…
John Shelby
  • 87
  • 2
  • 9
3
votes
2 answers

Formik Uncaught TypeError: Cannot read property 'getFieldProps' of undefined

I am using Formik to create form. When I use FieldArray in one of the form I get error saying Field.tsx:81 Uncaught TypeError: Cannot read property 'getFieldProps' of undefined To verify if I am doing something wrong, I copied example from documents…
Pavan Kumar
  • 1,715
  • 1
  • 24
  • 48
3
votes
1 answer

How to hide error message and only highlight field in yup test

I have a schema running a number of validations. But I don't want to display some error messages in case of an error although I want the field to be highlighted. Giving an empty string instead of an error message results in formik not showing the…
Anjayluh
  • 1,647
  • 1
  • 13
  • 22
3
votes
3 answers

How to validate individual element of an array of JSON objects using Yup

I have a JSON object which contains an array of JSON objects. My need is out of 2 array elements (vehicles), I just need to ensure that at least one is filled with data i.e. both can't be empty.. see my declaration below and my Yum schema const…
Dev
  • 177
  • 1
  • 5
  • 15
1
2 3
10 11