Provide label element linked to input

[themre]

Hi,
Great component, however I'm missing functionality to provide label with for attribute that would link to input element. Would it be possible to include this property?

[nkbt]

We pass-through all props to the component, so for should be present too.

[nkbt]

Ah, I see. All props are passed to wrapper <div>, not to every individual radio element...

[nkbt]

Now I understand what you mean (I think so)

You should use something like:

<RadioGroup for="blah" Component="label">
  <Radio>
   // ...

[danielberndt]

note it's htmlFor not just for
i.e.
<RadioGroup htmlFor="blah" Component="label">

[themre]

My own hack was to use uuid, since ids need to be unique:
let num = 0 return <RadioGroup {...this.props} > { this.props.sources.map((item) => { let id = uuid.v4() num++ return <span><Radio id={id} key={num} value={item.name} /><label htmlFor={id}>{item.name}</label></span> } )} </RadioGroup>
perhaps it would be more nice if there was some built-in method for this?

[nkbt]

If you wrap Radio into label, you will need neither id nor htmlFor.
On Mon, 15 Aug 2016 at 22:47, themre [email protected] wrote:

My own hack was to use uuid, since ids need to be unique:
let num = 0
return <RadioGroup {...this.props} >
{
this.props.sources.map((item) => {
let id = uuid.v4()
num++
return {item.name}
}
)}

perhaps it would be more nice if there was some built-in method for this?

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#34 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAKsoJ2_eAlpqxv8rgLNfl6Bi9bAm6M8ks5qgF-0gaJpZM4Jj7zP
.

[themre]

ok, that would then solve the problem label not being clickable. thanks.

[gabrielmicko]

What if you use it like this?
<RadioGroup name="published"> <label className="radio" name="published"> <Radio value="1" /> <span>Yes</span> </label> <label className="radio" name="published"> <Radio value="0" /> <span>No</span> </label> </RadioGroup>