Default values with MUI switch/radio group

[justintoman]

The example seems pretty far off from the rest of the guides on the conform docs. https://conform.guide/examples/material-ui
There's no props like name={field.name} or <Input {...conform.input(fieldConfig, {type: 'text'})} /> etc... I'd be happy to submit a PR to update the docs with the guidance in the answer to this question.

I'm trying to make a form with default values and I'm having trouble getting them to show up.

  const fetcher = useFetcher();
  const [form, {reportEmailFrequency}] = useForm({
    lastSubmission: fetcher.data,
    defaultValue: user,
    onValidate({formData}) {
      return parse(formData, {schema: UpdatePreferencesSchema});
    }
  });
  
  function handleSubmit(value: UpdatePreferencesForm) {
    fetcher.submit(value, {method: 'put'});
  }

      <RadioGroup onChange={event => handleSubmit({reportEmailFrequency: event.target.value as 'daily' | 'weekly'})}>
        {conform
          .collection(reportEmailFrequency, {
            type: 'radio',
            options: ['daily', 'weekly']
          })
          .map((props, index) => (
            <FormControlLabel
              sx={{textTransform: 'capitalize'}}
              key={index}
              label={props.value}
              control={<Radio {...props} />}
            />
          ))}
      </RadioGroup>

And it's not setting the default values that I'm providing to the form

I've verified that the user passed into defaultValue is what I expect it to be, but neither of the radio buttons are checked when I render the page. It's also giving me console errors:

Warning: Styled(input) contains an input of type radio with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components
    at input
    at http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:2515:45
    at span
    at http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:2515:45
    at ButtonBase2 (http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:8675:17)
    at http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:2515:45
    at SwitchBase2 (http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:18367:5)
    at http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:2515:45
    at Radio2 (http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:29426:17)
    at label
    at http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:2515:45
    at FormControlLabel2 (http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:10821:17)
    at div
    at http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:2515:45
    at FormGroup2 (http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:28360:17)
    at RadioGroup2 (http://localhost:3000/build/_shared/chunk-C3E7I27Z.js:29576:5)
    at form

• Am I supposed to use conform.input with material-ui?
• Am I supposed to use conform.collection with MUI?
  • If so, which component am I supposed to apply the {...props} to, the <Radio /> or the <FormControlLabel />?

[edmundhung]

Am I supposed to use conform.input with material-ui?

Yes. conform.input returns everything you need with an input element and I think the Input from material ui should support all of the properties.

Am I supposed to use conform.collection with MUI?

conform.collection is just an helper built on top of conform.input and should work the same. But in the case of radio group, it looks like MUI has done a context based setup that makes it slightly different from native radio group: It has a <RadioGroup /> component that takes a default value and name instead of expecting a name on each radio button and a default checked property. In such case, I think you can just do conform.input() like this:

<FormControl>
  <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
  <RadioGroup
    {...conform.input(fields.option)}
  >
    <FormControlLabel value="female" control={<Radio />} label="Female" />
    <FormControlLabel value="male" control={<Radio />} label="Male" />
    <FormControlLabel value="other" control={<Radio />} label="Other" />
  </RadioGroup>
</FormControl>

[justintoman]

Thanks! This worked for the RadioGroup but I wasn't able to get Switch/Checkbox or native checkboxes to work. I think it's because checkboxes are not boolean values in FormData. If it's checked, then the value is present in the FormData, otherwise it's not there at all. So I had to do defaultChecked={defaultValue.foo}. Not sure if there's a better way to do it.

[edmundhung]

With native checkbox, if you do conform.input(fields.something, { type: 'checkbox' }), it should set the defaultChecked property for you.

[edmundhung]

By the way, it's totally fine to not use the conform helpers when you see it not fit. They were simple utilities that designed for native input elements. Sometimes you might find it easier to just set each property manually when the UI component expects a different set of properties. In your case, all you need is defaultChecked={field.something.defaultValue === 'on'} (FYI, the default value of a checkbox/radio button is "on" if you do not specify anything)

[aaronadamsCA]

I think you ran into this bug I just filed:

#373

I assume your user comes from your database or API and matches your schema, as did ours. If so, any boolean values in defaultValues would cause the problems described in the bug report.

I had to do defaultChecked={defaultValue.foo}. Not sure if there's a better way to do it.

Thank you! This is exactly what I needed for a quick workaround.