Question 263844 in CSS Question posted in
Some basic documentation can be found here.

Css – How to place the label above the input text in a Material UI TextField component when there's a Start Adornment?

Just as the title says, I’ve been trying to get this done, but for the life of me I don’t know which Material UI css class manipulate to get this done. I have tried playing around with the InputLabelProps (shrink class to be exact), but it just didn’t work. I have a reusable TextField component created:

const useStyles = makeStyles({
    textFieldInput: {
        fontFamily: globalFonts.montserrat,
        fontSize: 13,
        fontWeight: "bold",
    },
    textFieldRoot: {
        borderRadius: 8,
        backgroundColor: "white",
        border: "1px solid #F5F5F5",
    }
});

export default function TextInput({error, label, onChange, value, InputLabelProps, InputProps, inputProps, icon, disabled, type, helperText}: Props) {
    const classes = useStyles();

    return (
        <TextField
            type={type}
            fullWidth
            label={label}
            value={value}
            variant='filled'
            onChange={(e) => {onChange(e)}}
            inputProps={inputProps}
            InputProps={
                InputProps ? InputProps :
                {
                    classes: {input: classes.textFieldInput, root: classes.textFieldRoot},
                    startAdornment: icon ? <InputAdornment position='start'>{icon}</InputAdornment> : undefined,
                    disableUnderline: true,                    
                }
            }
            InputLabelProps={InputLabelProps}
            error={error ? error(value) : false}
            helperText={helperText}
            disabled={disabled}
        />
    )
}

This is how it looks currently

This is how it should look

Does anyone have idea how to place the label above the inputted text, or have any of you met this problem before?

Sandbox link: https://codesandbox.io/s/quizzical-cdn-c6p3xc

Tags:

2

Answers


  1. 0

    You can make use of the InputLabelProps of the TextField component. Specifically, you should set the shrink property to true in order to make the label shrink when the input field is focused or has content.

    export default function TextInput({error, label, onChange, value, InputProps, inputProps, icon, disabled, type, helperText}: Props) {
    const classes = useStyles();

    return (
        <TextField
            type={type}
            fullWidth
            label={label}
            value={value}
            variant='filled'
            onChange={(e) => {onChange(e)}}
            inputProps={inputProps}
            InputProps={
                InputProps ? InputProps :
                {
                    classes: {input: classes.textFieldInput, root: classes.textFieldRoot},
                    startAdornment: icon ? <InputAdornment position='start'>{icon}</InputAdornment> : undefined,
                    disableUnderline: true,                    
                }
            }
            InputLabelProps={{
                shrink: true, // This will make the label shrink when focused or has content
            }}
            error={error ? error(value) : false}
            helperText={helperText}
            disabled={disabled}
        />
    )
}
    Login or Signup to reply.
  2. 0

    adding a marginLeft to the label should do the trick

    label: {
    "&.MuiInputLabel-filled.MuiInputLabel-shrink": {
      color: "#000000",
      fontWeight: 400,
      fontFamily: "Montserrat-Medium",
      marginLeft: "35px"
    }
  },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search