How to pass a value to for( htmlFor ) attribute in checkbox component in react-bootstrap?

Question

I am maintaining WCAG2.0 'AA' standards on a project in which i need to provide a value to for attribute in checkbox component in react-bootstrap but could not find a proper solution.

Code:: what i am writing jsx

<Checkbox checked={ props.item.selected || false }
onChange={() => {}}>
    <div className="label-text"></div>
</Checkbox>

what i looks like in html:

<div class="checkbox">
    <label title="">
        <input type="checkbox" value="on">
        <div class="label-text"></div>
    </label>
</div>

looking for sort of html :

<label **for="boxa"**>birds</label>
<input **id="boxa"** type="checkbox" name="mytext" />

The understanding for your code is not quite clear. Please add more details and what I think is you are looking for something like this: stackoverflow.com/a/46956250/7528968 — Aniruddh Agarwal
– Aniruddh Agarwal, Commented Feb 13, 2018 at 8:03

Daniel Andrei · Accepted Answer · 2018-02-13 08:04:27Z

0

You can have a look over the source code of the component from react-bootstrap, but TLDR: they don't provide an option to add a for attribute on a Checkbox component. There's even an eslint disable for it.

Here's the source of the label that accompanies the checkbox.

answered Feb 13, 2018 at 8:04

Daniel Andrei

2,70417 silver badges16 bronze badges

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

Comments

Rolando Niubó · Accepted Answer · 2022-05-25 19:28:11Z

0

If this is reactstrap try this:

import { Form, FormGroup, Label, Input } from 'reactstrap';

<Form>
  <FormGroup>
    <Input type="checkboxId" />
    <Label htmlFor="checkboxId">
      Some input
    </Label>
  </FormGroup>
</Form>

answered May 25, 2022 at 19:28

Rolando Niubó

1,2351 gold badge12 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to pass a value to for( htmlFor ) attribute in checkbox component in react-bootstrap?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related