UX: Form field markup bug

[ikbensiep]

Currently, selecting a form control can only be done by clicking or focusing the form control element itself; focusing the associated <label> element does nothing.
This is particularly annoying for radio and checkbox inputs.

The <label> tags do have for='...' attributes, but the form controls all lack an id='...' attribute.
(they are outfitted with name='...' attributes, but the input needs to have a matching id attribute for it to respond to a click on its <label> element. 😢 )

Suggested solution

add id attribute matching the name attribute on Form controls (<input>, <select>, <textarea> etc)

[evert]

Probably a good usecase for useId:

https://reactjs.org/docs/hooks-reference.html#useid