CODEWITHSUNDEEP
reactjsmaterial-ui
Francis Ducharme
Francis Ducharme

Reputation: 4987

How to add padding between label and control on FormControlLabel

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.

Upvotes: 6

Views: 11614

Answers (3)

twharmon
twharmon

Reputation: 4272

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.

Upvotes: 7

Karthick Vinod
Karthick Vinod

Reputation: 1437

Would this work for you?

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

Upvotes: 0

keikai
keikai

Reputation: 15146

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

Upvotes: 0

Related Questions