Checkbox/radio - support for isLabelWrapped

[mcoker]

The radio component supports isLabelWrapped, which uses a <label> as the outer/parent component wrapper for the radio component, and changes the inner "label" element to a <span> so that the markup is <label><input><span>label</span></label> instead of <div><input><label>label</label></div>, and the checkbox does not.

The checkbox supports a component prop that will change the outer/parent component wrapper to whatever (eg, component="label" renders it as a <label>), but the inner "label" element is fixed and is always a <label>, so if you do <Checkbox component="label"> then you'll have a nested <label> inside, too, which you don't want. The radio component does not support component. You can see the issue with the nested <label> here:

Also we have a use case for a checkbox with the parent wrapper as a <label> in the <MenuToggleCheckbox /> component, but you can see we've manually recreated the checkbox component to get the correct HTML structure (there may be other reasons it was made this way). Ideally, <MenuToggleCheckbox /> could just be <Checkbox isLabelWrapped />.

My recommendation:

• Add support for <Checkbox isLabelWrapped />
• Update <MenuToggleCheckbox /> to use ^^
• Be consistent in the support for the component prop for radio/checkbox, and if we support it, be consistent on both the parent wrapper and the "label" wrapper.
  • I think being able to specify a different element as the outer/parent wrapper is good using component
  • Since the label prop for both components is a ReactNode, I don't know how necessary it is to allow users to change the "label" element wrapper, since they could just pass whatever kind of element they want to label. But if it doesn't hurt anything, it may be good to support some kind of labelComponent prop or something for it anyways.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.