Multiple checkbox in redux-form

Question

I would like to ask, here's the scenario. I have this multiple checkbox but my problem is whenever I tick one checkbox, all of the 4 checkboxes are selected. And also why is it the value of checkbox is just true or false.Here's my checkbox:

<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Seed" /> Seed</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Early Stages" /> Early Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Formative Stages" /> Formative Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value=" Later Stages" /> Later Stages</label>
</div>

ReduxForm not supporting checkbox group. This might help you as workaround. — Jyothi Babu Araja
– Jyothi Babu Araja, Commented Mar 16, 2017 at 14:08
Hi @JyothiBabuAraja do you have an example how to implement it. I'm quite in new react :D. Thank you! — Sydney Loteria
– Sydney Loteria, Commented Mar 17, 2017 at 2:48
Yeah, I did try that but there's an error it looks like it is using the v5.5.3 of redux-form and I'm using v6.5.0 — Sydney Loteria
– Sydney Loteria, Commented Mar 17, 2017 at 4:59
I am also on voyage of solving this problem :-), but yet to find a concrete answer. — Aftab Naveed
– Aftab Naveed, Commented Mar 17, 2017 at 21:32

Alexander · Accepted Answer · 2017-09-22 09:10:13Z

20

For people like me who are new to redux and react may find the original code mentioned here confusing. I modified and converted it to an ES6 class. I also Removed bootstrap, validation and made it easy to debug.

Here is the modified code

import React from 'react';

class CheckboxGroup extends React.Component {

    checkboxGroup() {
        let {label, required, options, input, meta} = this.props;

        return options.map((option, index) => {
            return (
            <div className="checkbox" key={index}>
                <label>
                    <input type="checkbox"
                           name={`${input.name}[${index}]`}
                           value={option.name}
                           checked={input.value.indexOf(option.name) !== -1}
                           onChange={(event) => {
                               const newValue = [...input.value];
                               if (event.target.checked) {
                                   newValue.push(option.name);
                               } else {
                                   newValue.splice(newValue.indexOf(option.name), 1);
                               }

                               return input.onChange(newValue);
                           }}/>
                    {option.name}
                </label>
            </div>)
        });
    }

    render() {
        return (
            <div>
                {this.checkboxGroup()}
            </div>
        )
    }
}


export default CheckboxGroup;

Usage:

let optionsList = [{id: 1, name: 'Optoin1'}, {id: 2, name: 'Option 2'}, {id: 3, name: 'Option 3'}]     
<Field name="roles" component={CheckboxGroup} options={optionsList} />

edited Sep 22, 2017 at 9:10

Alexander

1242 silver badges6 bronze badges

answered Mar 18, 2017 at 10:38

Aftab Naveed

3,8893 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gaius Over a year ago

Many thanks @aftab-naveed ! What does the optionsList object look like ? I try to implement it without success.

Aftab Naveed Over a year ago

let optionList = {id: 1, name: 'Optoin1', id: 2, name: 'Option 2'}

TariqN Over a year ago

Good but, touch event doesn't work for me, it is always false. After the first form submit, touched event start firing. const {options, name, input, meta: { touched, error }} = this.props; const hasError = touched && error;

bozdoz Over a year ago

Works great; for some reason I had to make a change to newValue: const newValue = [...input.value] || []

CDM Over a year ago

do i need jQuery for this?

|

Silambarasan N · Accepted Answer · 2021-01-25 11:28:53Z

1

Please give different field names for each checkbox. (name="investor_stage").The problem is all the field names are same.

answered Jan 25, 2021 at 11:28

Silambarasan N

2332 silver badges5 bronze badges

Comments

CDM · Accepted Answer · 2019-07-11 01:32:37Z

0

Adding some style to @Aftab Naveed I wrapped my checkboxes in a label with these classnames instead and they ended up real pretty and easier clicked:

<label key={option.name} className="form-check-label" style={ {"fontSize": "1.5em"} }>
          <input ... />
            <span>{option.name}</span>
          </label>

i did not use bootstrap, i think its a redux form thing with className "form-check-label"

answered Jul 11, 2019 at 1:32

CDM

5165 silver badges9 bronze badges

Collectives™ on Stack Overflow

Multiple checkbox in redux-form

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related