Checkbox with label is rendered wrong

Issue

According to the readme it’s possible to just add a standard <label> element after the checkbox.

        <Checkbox
          nativeControlId='my-checkbox'
          checked={this.state.checked}
          indeterminate={this.state.indeterminate}
          onChange={(e) => this.setState({
            checked: e.target.checked,
            indeterminate: e.target.indeterminate})
          }
        />
        <label htmlFor='my-checkbox'>My Checkbox</label>

Will render a checkbox looking like this, with the label wrongly positioned and wrong font:

Example code here: https://stackblitz.com/edit/react-wpvkxv

Possible solution

It’s missing the Form Field CSS. There is no Form Field React component so this is the best solution I found but it seems wrong to have to do it like this:

• add form field CSS from package @material/form-field
• use a wrapping div around the <Checkbox> and <label> with the class “mdc-form-field”

Then it looks as expected:

Example code here: https://stackblitz.com/edit/react-stbwsz?file=Checkbox.js

[moog16]

@seriema yes, adding the form field component is the correct solution. We never created the form-field component since it is just styles. But if you’d like to create a component for it please feel free 😃

[lbell]

import "@material/form-field/dist/mdc.form-field.css";

for css – apparently.

(Found this all woefully confusing.)