I want to use full width in the Form Control Label component.

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

function initItemsTemplate(items) {
    return items.map((answer, i) => {
        return (
            <Box key={i}>
                <FormControlLabel 
                    label={
                        <Typography key={i.toString()} variant="body2"
                            fullwidth
                            style={{ margin: '2px 0px 0px 0px' }}
                            children={`${answer.example}`}/>}
                    control={<Checkbox 
                                defaultChecked={answer.isChecked}
                                style={{ marginLeft: '0px'}} 
                                onchange
                                onChange={(event) => answerChecked(event, answer.id)}/>}/>
            </Box>
        );
    })
}

This is FormControlLabel component.

And the pink area is an area where you can click FormControlLabel.

I want the Checkbox event to work when I click on all areas as below.

Examples 🌈

This is a page that actually works. GitHub Source code parts.

Motivation 🔦

No response

[jamesnet214]

@abhinav-22-tech Thank you. That’s exactly what I want. FormGroup

[abhinav-22-tech]

Yes, You will also use FormGroup.

<Box style={{ width: 300, backgroundColor: "#f1f1f1", padding: 10 }}>
      <FormGroup>
        <FormControlLabel
          label={<Typography children="Name" />}
          control={<Checkbox />}
        />
      </FormGroup>
</Box>

Check out: https://codesandbox.io/s/cocky-cannon-3kzr9?file=/src/Demo.tsx