Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

88
Views
Unable to set initialValues on checkboxes through Field in react final form

I'm having issues with initialValues in my project, where I'm using react-final-form.

What I'm looking for is to have multiple initialValues to be set on the list of checkboxes.

I'm aware of the initialValues property on where I can set it from there, like below.

<Form
onSubmit={onSubmit}
initialValues={{ sauces: ["ketchup", "mustard"] }}
render={({
  handleSubmit,
  form,
  values,
  ...formProps
}) => (
  <form onSubmit={handleSubmit}>
    <div>
      <label>Sauces</label>
      <div>
        <label>
          <Field
            name="sauces"
            component="input"
            type="checkbox"
            value="ketchup"
          />{" "}
          Ketchup
        </label>
        <label>
          <Field
            name="sauces"
            component="input"
            type="checkbox"
            value="mustard"
          />{" "}
          Mustard
        </label>
    </form>
/>

But I want to be able to use the initialValue on instead because I don't have access to the where I'm rendering the checkboxes.

<Form
onSubmit={onSubmit}
render={({
  handleSubmit,
  form,
  values,
  ...formProps
}) => (
  <form onSubmit={handleSubmit}>
    <div>
      <label>Sauces</label>
      <div>
        <label>
          <Field
            name="sauces"
            component="input"
            type="checkbox"
            value="ketchup"
            initialValue={["ketchup", "mustard"]}
          />{" "}
          Ketchup
        </label>
        <label>
          <Field
            name="sauces"
            component="input"
            type="checkbox"
            value="mustard"
            initialValue={["ketchup", "mustard"]}
          />{" "}
          Mustard
        </label>
    </form>
/>

I have a code example below where I set initialValues through the and also through

It works fine on example, but on the values get set but I'm unable to edit the checkboxes when I use initialValue on . I tried it both with a single value and multiple values. Is this a bug within react-final-form or can this be accomplished in another way?

https://codesandbox.io/s/react-final-form-issues-with-checkboxes-forked-6fc68u?file=/index.js

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!