Checkbox: allow props to be passed via props

[moog16]

Nov 13 in Discord user reports issues of being able to pass props to field. He created a codepen. JS on the right is the JSX markup. The HTML on the left is what was output by the rendering engine.

https://codepen.io/jbsmith969/pen/zMNVEL

What would be better is rendering the component through composition. Instead of doing:

<Checkbox ... />

we should instead do:

<Checkbox ... >
  <CheckboxInput ... />
</Checkbox>

[behivetech]

Oh nice! I like that. Would you do same for the Switch component as well?

[moog16]

Yes, especially for consistency that makes sense. I'll open one for that component

[moog16]

Need to keep in mind this bug when fixing this issue.

[behivetech]

From what I'm reading on that bug, it would seem like the ref issue would be fixed with this wouldn't it? The whole point of it is to give the developer more control over the props passed to the input element, so I would think this should come from free with this implementation.

[moog16]

This component actually needs a handle on the ref. So it actually won't be fixed for free. But #308 is something we should have available in some way shape or form to give the developer more control. We may need to proxy the ref to the developer. Currently in text field we have a solution:

https://github.com/material-components/material-components-web-react/blob/master/packages/text-field/Input.js#L109