在 Label 旁边创建 MUI TextField

Question

I've searched all over, but I can't make it work. I want to create a TextField Element Next to a label
(and not anywhere inside or touching the border of a TextField) like this one: Desired Result

Labe <____> TextField Such a scenario is not covered in the documentation . The best i could get was to use the startAdornment in the TextField Component.

InputProps={{
        startAdornment: (
          <InputAdornment position="start">Name</InputAdornment>
        )
      }}

Also I tried, to use the FormControlLabel component and pass inside the TextField as a Control , although TextField can't be anymore fullWidth

  <FormControlLabel
    control={<TextField
      variant="standard"
      margin="normal"
      id="tags"
      helperText="service."
      fullWidth
    />}
    label="Start"
    labelPlacement="start"
  />

But it doesn't seem to work properly and I'm not even sure if I should use a FormControlLabel with a TextField. Thank you in advance. This seems as something very basic but I can't get it to work and I find no other relative problems posted.

Answer 1

you can apply a flex style to your Form or wrap your Textfield in a div with an InputLabel in it like and add style to match the desire result for example like this:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import InputLabel from "@material-ui/core/InputLabel";
import { FormHelperText } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex"
  },
  TextFieldDiv: {
    marginLeft: "15px"
  },
  labelName: {
    paddingTop: "10px"
  },
  optionalTag: {
    fontSize: "13px"
  },
  labelTag: {
    textAlign: "right"
  }
}));

export default function BasicTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <InputLabel className={classes.labelName}>
        <div className={classes.labelTag}>Name</div>{" "}
        <div className={classes.optionalTag}>(optional)</div>
      </InputLabel>
      <div className={classes.TextFieldDiv}>
        <TextField id="standard-basic" />
        <FormHelperText>The service name</FormHelperText>
      </div>
    </form>
  );
}

here a sandBox Example