How to add padding between label and control on FormControlLabel

user_731678 0
Viewed 5141

I'm trying to have an inline form, where the label is left to the control which doesn't seem to be default usage of various form components.

So far this does the trick:

<Grid container spacing={0}>
    <Grid item xs={12}>
        <FormControlLabel
            label="ID"
            disabled
            value="42a5936e-9856-42d4-b540-104fd79bcf36"
            labelPlacement="start"
            control={
                <TextField fullWidth name="ID" />
            }
        />
    </Grid>
</Grid>

But there is no space at all between the label and the control.

Here's what it looks like

enter image description here

I assume some padding-right has to be added to the label, but I'm not sure where I would put that using these components.

material-ui reactjs
3 Answers

Add style to the props of TextField:

<Grid container spacing={0}>
    <Grid item xs={12}>
        <FormControlLabel
            label="ID"
            disabled
            value="42a5936e-9856-42d4-b540-104fd79bcf36"
            labelPlacement="start"
            control={
                <TextField
                    fullWidth
                    name="ID"
                    style={{ paddingLeft: '20px' }}
                />
            }
        />
    </Grid>
</Grid>

Alternatively, TextField takes a className prop for you to add classes to the components and style those classes.

user_58085040

To customize the Textfield input zone padding:

Use MUI nesting selector of className MuiInputBase-root

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiInputBase-root": {
      paddingLeft: 10
    }
  }
}));

const classes = useStyles();

control={<TextField fullWidth name="ID" className={classes.root} />}

enter image description here

For inline style

enter image description here

user_118722460

Would this work for you?

<TextField
   value="42a5936e-9856-42d4-b540-104fd79bcf36"
   fullWidth
   InputProps={{
     startAdornment: (<InputAdornment position="start">ID</InputAdornment>)
   }}
/>
user_39787050
Related