Mark material-ui fields as required based on the yup schema

[petermiles]

We have a bunch of fields in our app that we want to mark as required. We'd like to utilize the required prop in material-ui to manage adding an asterisk or not based on if it's required.

Ideally we could pass in whatever yup schema to the resolver prop of useForm and react-hook-form would add the required prop to whatever field we are using. I see this could being an issue because RHF really just manages the inputRef, not the component itself so it wouldn't know anything about the MUI components we are using.

Got any ideas?

[bluebill1049]

you have a codesandbox, not sure if i am following.

[amankkg]

I think this is not possible on RHF level. For example, we have a Yup schema with some fields being required or not depending on other field values.

Something similar we do is depending on TextFields required prop we set register rule, so it's kinda vice versa