How to use this with Mantine?

[VigneshVaidyanathan]

I am trying to use this library with Mantine and do I have to create a custom component for every form element I use like input, textarea, select etc? to access the input props for each component?

There is no direct example to use Mantine or external UI Library along with Remix Validated Forms. Please help.

[airjp73]

Good callout about this not really being documented. That's something that could definitely be worth adding.

In most cases, I think you do most likely want to create a custom component for each Mantine form component you want to use in your forms.

---

Other libraries like react-hook-form provide ways to wire up your forms entirely at the top level without custom components, but I find that approach cumbersome at scale when you have 100+ forms in an app. So this library prioritizes conciseness at the form level at the expense of some extra wiring for each input type.

Now, if you only use one date picker in your app (for example) and really don't want to create a custom component, it's definitely possible to skip that by doing something like this.

const { error: myDateError, getInputProps: getDateInputProps } = useField("myDate", { formId: 'my-form' });

return (
  <ValidatedForm validator={validator} id="my-form">
    <MantineDatePicker {...getDateInputProps({ error: myDateError })} />
    <MySubmitButton />
  </ValidatedForm>
)

---

Also, depending on your requirements, the form still works even without wiring it up with useField. The validation won't be as good as it would otherwise be, though.

The example below will still:

• Validate on form submit
• Submit all the data the same as before

But it won't:

• Validate as the user types
• Clear validation errors until the user attempts to submit again

return (
  <ValidatedForm validator={validator}>
    <MantineDatePicker name="myDate" />
    <MySubmitButton />
  </ValidatedForm>
)

[VigneshVaidyanathan]

I agree when you say it is easier and have more control when we do this way.

I see that creating a wrapper around the provided Mantine component is not difficult but unwanted. Although it serves the purpose, we are able to get everything wired up properly, it would be better if there is some other workaround that is similar to this remix-forms where we get the useField for the entire form control, so we can define it as we want.

Advantages I see when we have that kind of structure

• Easy to wire up without having to write wrapper for every single component we use (if we need the validation to happen as and when user types)
• We can have the schema types which can enforce strongly typing as did in the remix-forms.

I am a beginner when it comes to Remix and how to get these working but if there is a way to get this forms validated without having to write a wrapper, I would be excited. Please let me know.

[airjp73]

Are you specifically referring to the render-props api that remix-forms has? That can be achieved in userland pretty easily.

const Field = ({ name, children }) => {
  const fieldInfo = useField(name);
  return children(fieldInfo);
}

// Usage
<Field name="myField">
  {({ error, getInputProps }) => <MantineComponent {...getInputProps({ error })} />}
</Field>

[VigneshVaidyanathan]

Yup thats what I meant. Sorry I am just getting started with React and not sure if this is supposed to be obvious.

Could you also help me out with this please,
I have a date and time picker separately i.e. there is a date picker and a time picker to select date and time. So I want to check if both those are set, which I can easily do, but I want to show only one error message

[airjp73]

The answer to that is going to depend a bit on which validation library you're using.

There are definitely multiple ways to do this, but here's one suggestion.

If you're using zod, you might build your schema like this:

const validator = withZod(
  z.object({
    someUnrelatedField: z.string(),

    // Nest the dates into an object so we can add a validation to the whole object
    dateFields: z.object({
      date: z.string(),
      time: z.string(),
    }).refine(
      dateFields => !!dateFields.date && !!dateFields.time,
      'Please select a date and a time'
    )
  })
);

Then in your form, you could grab the error for the dateFields object instead of the individual fields.

const MyDateTimeField = ({ name }) => {
  const { error } = useField(name);
  return (
    <fieldset>
      <legend>Choose a date and a time</legend>

      {/* MyDatePicker and MyTimePicker can both be using useField internally as well */}
      <MyDatePicker name={`${name}.date`} />
      <MyTimePicker name={`${name}.time`} />

      {error && <MyError>{error}</MyError>
    </fieldset>
  )
}

If you're using Yup, you might be able to achieve a similar result with the test method.

[VigneshVaidyanathan]

Wow. Thank you so much for the help. I am learning my stuff here so hitting some blocks.

[kwiat1990]

I'm also using it with Mantine and I came up with the idea of using useFormContext as follows:

import { useFormContext, ValidatedForm } from "remix-validated-form";

const formContext = useFormContext("addComment");

return (
  <ValidatedForm
    validator={validator}
    method="post"
    id="addComment"
    defaultValues={{
      name: session?.name
    }}
  >
    <TextInput
      error={formContext.fieldErrors.name}
      defaultValue={formContext.defaultValues?.name}
      label="Name"
      name="name"
    />
  </ValidatedForm>
)

[kwiat1990]

@VigneshVaidyanathan thanks for the tipp to call validate() on onChange. That was the last missing part to get it working. I went with my default approach as I can't fully type that FormField wrapper component. So my code looks like this:

const reasonField = useField("reason", { formId: id });

<RadioGroup
  label="Reason"
  name="reason"
  error={reasonField.error}
  onChange={() => reasonField.validate()}
>
  {reasons.map(({ key, value }) => (
    <Radio
      {...reasonField.getInputProps({
        key,
        label: value,
        size: "md",
        value: key,
      })}
    />
  ))}
</RadioGroup>

I was really surprised that a single useField did work for multiple radios. I thought I would need to call useField directly in the loop like this:

 <Radio
  {...useField("reason", { formId: id }).getInputProps({
    key,
    label: value,
    size: "md",
    value: key,
  })}
/>

[VigneshVaidyanathan]

I am not sure how this might have worked as the getInputProps sets the value, error and handles onChange validation. So technically, in your radio group you arent setting the currently selected value (incase of setting it from the database), in which case you need to send defaultValue={value} and this makes it almost that you can forego the getInputProps that you have used inside for each Radio and just add simple radio buttons.

The on change event will be fired for the Radio group by Mantine and there you are already handling the validation and that will inturn set the error properties if any.

Havent tried it in code though so please correct me if I am wrong.

[FlurryNight]

Hey, looking for the best way and correct way to do it, can this be documented and an example be provided?

For ex this component: https://mantine.dev/core/password-input/#strength-meter-example

I know i need to create an Custom component using this component inside it, but can I use what the component offers with this package.

This is a very good library , i need to use it and not being able to fully integrate this is delaying my projects

Thank you for your work @airjp73

[VigneshVaidyanathan]

Can you explain/ show code of what you have right now?

As far as I can see, the validation is done outside of Zod Schema which this package uses. So technically, you can have a zod schema that just says password: zod.string() and the validation is taken care by the custom implementation.

To get the proper name and other things wired up, you can try to use this implementation
#121 (reply in thread)

I havent tried it thought, I can check this and respond later today, if it doesnt work for you,

[FlurryNight]

Hi, Thanks for your response , I don't have code right now since i was not able to make it work.

I' will try the implementation u suggested, and report back if smth doesn't work,

Thank you

[kwiat1990]

Hi, I have worked mainly with Vue and I was really surprised that some things in React doesn’t yet exist or are pretty new. Same goes for nested layouts and React Router is similar to Vue Router, which I find really good. The thing with using `Box` is that without Tailwind it’s cumbersome to style naked divs. But with it sure, I would also prefer native div with some classes attached to it. I‘m working on a blog for my wife with meilisearch and comment system. My backend is Strapi CMS with Postgres and for client I use Remix. All pf this I host on my VPN using Caprover, which is self-hosted PaaS lile heroku and make setup really simple. Mateusz

[kirankumal]

@airjp73 I am working on implementing Remix Validated Forms with the Shadcn UI library and Zod Validation Library, particularly focusing on integrating the Shadcn Datepicker component but couldn't find any example. Any guidance or assistance in this process would be greatly appreciated.