Specify initial value for radio button

Question

I want to the "Exact" radio button to be checked when a form is opened:

<Form
      onSubmit={onSubmit}
      initialValues={{ match_type: "exact" }}
      render={({ handleSubmit, form, reset, submitting, pristine, values }) => (
        <form
          onSubmit={() => {
            handleSubmit();
          }}
        >
          <fieldset>
            <legend>Match type</legend>
            <Field name="match_type">
              {({ input }) => (
                <label>
                  <input {...input} type="radio" value="fuzzy" /> Fuzzy
                </label>
              )}
            </Field>
            <Field name="match_type">
              {({ input }) => (
                <label>
                  <input {...input} type="radio" value="exact" /> Exact
                </label>
              )}
            </Field>
          </fieldset>
          <button type="submit">Save match</button>
        </form>
      )}
    />

The radio button remains unchecked. Any idea how I should get this to work? Note using <Field component="input" type="radio" .../> is not an option for me.

Codesandbox: https://codesandbox.io/s/react-final-form-reset-after-submit-forked-q6jyv?file=/index.js:359-1235

Neither method will provide the value to Final Form's state. — Mister Epic, Aug 19 '20 at 12:43

score 0 · Answer 1 · answered Aug 18 '20 at 16:10

0

You can set the default to be checked in the tag.

<input {...input} type="radio" value="exact" checked />

answered Aug 18 '20 at 16:10

seanreichel

26
5

Note if I do this, the input will not provide its value to React Final Form. – Mister Epic Aug 19 '20 at 12:42
Remove the HTML markup for the input and add everything to the `` component. `{' '}Exact` – seanreichel Aug 19 '20 at 15:18

score 0 · Answer 2 · answered Aug 19 '20 at 15:05

I just needed to use the Field component properly:

<Field name="match_type" type="radio" value="fuzzy">
  {({ input }) => (
    <label>
      <input {...input} /> Fuzzy
    </label>
  )}
</Field>

This way the <input will get what it needs spread in from the argument to the render prop.

score 0 · Answer 3 · answered Aug 30 '20 at 15:44

If you inspect your component in codesandbox provided, you can see that Field component doesn't have value prop. I'm attaching a screenshot here

You have a few options to solve this. The main idea though is to understand what you are passing when you say {...input} In your Field component, you currently only have name prop, so you can add something like this

input={{ name: 'match_type', value: 'exact', onChange: (e) => (whatever you need on change) }}

RFF could be tricky with just setting value like that since source of truth lives in the form. So, you can also use a mutator functionality of the form. This is a good description of how to do it

Specify initial value for radio button

3 Answers3