CODEWITHSUNDEEP
material-designmaterial-ui
Big Daddy
Big Daddy

Reputation: 5224

Material UI - Checkbox Label is Missing

I'm learning Material UI and I'm trying to display an checkbox with a label. Following the samples in the online docs, I'm rendering a checkbox, but no label. What am I doing wrong?

 return (
        <div className="entryForm" >
            <div style={{width:'100%'}}>
                <h3 style={ {display:'inline-block' } }>
                    User Details
                </h3>
                <span style={{float:'right'}}>
                    <Checkbox
                        label="Active"
                        labelPosition="left"
                    />
                </span>
            </div>...

Upvotes: 5

Views: 15754

Answers (2)

Tom
Tom

Reputation: 1143

I think it depends on the MUI version you are using. If you're using version 1.0 and above you should use FormControlLabel:

import {FormControlLabel} from 'material-ui/Form';

<FormControlLabel
control={
    <Checkbox
        name="SomeName"
        value="SomeValue"
    />
}
label="MyLabel"/>

More in the documentation: https://mui.com/material-ui/react-radio-button/

Upvotes: 14

Mnai
Mnai

Reputation: 507

FormControlLabel would be the way to go, here is what it looks like with the updated import v4.11.1

import { FormControlLabel } from '@material-ui/core';

<FormControlLabel
control={
    <Checkbox
        name="SomeName"
        value="SomeValue"
    />
}
label="MyLabel"/>

Upvotes: 3

Related Questions