EUIRadio with a label and no id behaves unexpectedly

[oatkiller]

Hi there. Thanks for the work on EUI. I've really been enjoying using it. I found some behavior that I think is unexpected and threw me for a loop.

If you define an EuiRadio with a label and no id, onChange will not be triggered from a click.

    <EuiRadio
      label="EUIRadio with a label and no ID"
      onChange={useCallback(() => alert("changed"), [])}
    />

Check my codesandbox to see the example.

If the label property is passed an HTML <label /> element will entirely obscure the <input /> element. The <label /> element isn't the parent of the <input /> and so if no id attribute associates them, the click event on the <label /> will not trigger a change event on the <input />.

Reproduce this

• Create an EUIRadio with label and onChange properties. The onChange property should be a function which calls alert or runs some other code that you can use to assert that the function ran.
• Load the code in a browser and click the EUIRadio component.
• The function will not have run, and no alert will be shown.

Expected

• If the onChange property is provided it will be run, even if label is provided and id is not.
• OR, the id should be required if label is passed.
• OR, the behavior should be documented

[anishagg17]

Expected
If the onChange property is provided it will be run, even if label is provided and id is not.
OR, the id should be required if label is passed.
OR, the behavior should be documented

which is the required behaviour?

[chandlerprall]

which is the required behaviour?

id should be required if there is a label provided, as it is necessary for the label->radio interaction.