Checkbox and Radio buttons do not show their label

[aikidoshi]

I have a redux form working nicely with material-ui using your redux-form-material-ui 5.0 beta 3 and it is fantastic except for the Checkbox and Radio controls.

Using the code off the website (see below) the Checkbox and Radio buttons do not show their label:

                    <Grid item xs={12}>
                        <FormControl component="fieldset" required className={classes.formControl}>
                            <FormLabel component="legend">Gender</FormLabel>
                            <Field name="Gender" component={RadioGroup} className={classes.formControl}>
                                <Radio value="Male" label="Male"/>
                                <Radio value="Female" label="Female"/>
                            </Field>
                        </FormControl>
                    </Grid>
                    <Grid item xs={12}>
                        <FormControl component="fieldset" className={classes.formControl}>
                            <FormLabel component="legend">Flying Solo?</FormLabel>
                            <Field
                                name="Solo"
                                label="Solo Licence"
                                component={Checkbox}
                                className={classes.formControl}
                            />
                        </FormControl>
                    </Grid>

pakage.json:
"dependencies": {
"@material-ui/core": "^1.2.1",
"@material-ui/icons": "^1.1.0",
"moment": "^2.22.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"redux": "^4.0.0",
"redux-form": "^7.4.0",
"redux-form-material-ui": "^5.0.0-beta.3",
"typeface-roboto": "^0.0.54"

[kjellski]

I've got the same problem.

[Neo478]

Working for me with FormControlLabel:

import FormControlLabel from '@material-ui/core/FormControlLabel';
import {
  Checkbox,
} from 'redux-form-material-ui';

...
// In the render function:
<FormControlLabel
        control={
          <Field
            name="agreeToTerms"
            component={Checkbox}
          />
        }
        label={<span>I accepts the <a>terms and conditions</a></span>}
      />

If you need a custom checkbox, i advise to use an adapter like so:

const CheckboxAdapter = inputProps => (<Checkbox
    {...inputProps}
    value={inputProps.input.value}
    onChange={inputProps.input.onChange}
  />);

and pass it to the 'component' props of 'FormControlLabel'

[nubiofreitas]

I've got the same problem. [2]

[lc3t35]

I had the same problem (Field from "redux-form/immutable") with

"@material-ui/core": "3.5.1",
"redux-form": "7.4.2",
"redux-form-material-ui": "5.0.0-beta.3",

@Neo478 workaround worked fine

[andypaling]

I have the same problem.