Make Checkbox required in reactjs

Question

I want to make checkbox mandatory field in react js.

I am new to reactjs but i have an idea that i should do it using length . Below is the code:

<CheckboxGroup name="zones" value={this.state.zones} onChange={this.handleCheckboxChange}>
       {(Checkbox) => (
         <>
                                                   
            {this.state.zones_to_render_to_render.map((zone, key) =>
              <Col key={key} lg="10">
                  <label >
                         <Checkbox value={zone.zone_id} />{zone.zone_name}
                  </label>
             </Col>
                                                            

          )}
                                                        
       </>
     )}
</CheckboxGroup>

How to check using length?

Look at these answers stackoverflow.com/questions/32174317/… . You can do it just using false/true. — Champion
– Champion, Commented Aug 14, 2020 at 7:08
It looks like you're using AntD. You can use their Forms API to accomplish this and handle the rest of the form's functionality, or look into a solution like Formik which can also handle validation for you. There is simply not enough code here to determine what making it "required" means yet. — Chris B.
– Chris B., Commented Aug 14, 2020 at 7:08
You can use true/false to do that. You do not need to use length here. You can create a function, let's say: invalid() where you check whether your checkbox is checked or not. Then if invalid, do not submit the form, and you can show a pop up error. — Donald Shahini
– Donald Shahini, Commented Aug 14, 2020 at 7:12

Awais Rafiq Chaudhry · Accepted Answer · 2020-08-16 11:50:03Z

0

The component <Checkbox /> has a prop required which is false by default you can make the checkbox mandatory by passing it true.

<Checkbox value={zone.zone_id} required={true} />

answered Aug 16, 2020 at 11:50

Awais Rafiq Chaudhry

4903 silver badges10 bronze badges

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

2 Comments

karthik Over a year ago

It is making to select all the checkbox field. I want to select any 1 field.

Awais Rafiq Chaudhry Over a year ago

In the map function, key is basically the index of the zones, you can conditionally make the checkbox mandatory by passing some condition to the required prop. Below are some examples: 1. To make the first checkbox mandatory, you ll have to do required={key === 0} 2. To make the last checkbox mandatory, you ll have to do required = {key === this.state.zones_to_render_to_render.length}

Collectives™ on Stack Overflow

Make Checkbox required in reactjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related