How to Have a Textfield Inside a Label

Can I have a textfield inside a label?

Use a 'composite component' by adding the required parts to a JPanel. E.G.

import java.awt.FlowLayout;
import javax.swing.*;

class TimeBeforeClass {

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                JPanel gui = new JPanel(new FlowLayout(FlowLayout.LEFT, 3,3));
                gui.add(new JLabel("Open"));
                gui.add(new JSpinner(new SpinnerNumberModel(15,0,20,1)));
                gui.add(new JLabel("minutes before class"));
                JOptionPane.showMessageDialog(null, gui);
            }
        });
    }
}

Note that I swapped the 'textfield' for a JSpinner - a more suitable component for selecting 'time in minutes'.

How to have the label and input text within the same container

You could create a custom text box:

Container(
    Column(
       children: [
         Text("insert label text", textAlign: TextAlign.start)
         TextField(
           ...
           // no labelText
           // remove decorations
         )
      ]
   )
);

Should I put input elements inside a label element?

From the W3's HTML4 specification:

The label itself may be positioned before, after or around the
associated control.

---

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

Material-UI TextField variant label striking through value

Add InputLabelProps={{ shrink: true }} to force the "shrink" state of a TextField control, which in this case should render the label on the outline of the field.

import { TextField } from "@material-ui/core";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <TextField variant="outlined" label="Label" value="Vest" InputLabelProps={{ shrink: true }}/>
    </div>
  );
}

How to show both label and placeholder in material-ui TextField

you can force input label to shrink. https://mui.com/components/text-fields/#shrink

you can add input Text color with sx props on TextField. placeholder takes color from the input text color too. you can test this by removing inputProps props in below code.

if you want different colors for input text and placeholder use inputProps
ref: Styling the placeholder in a TextField

<TextField
  sx={{
    "& .MuiOutlinedInput-root": {
      color: "red"
    }
  }}
  variant="outlined"
  label="Your custom label"
  placeholder="Placeholder Text"
  InputLabelProps={{ shrink: true }}
  inputProps={{
    sx: {
      "&::placeholder": {
        color: "green"
      }
    }
  }}
/>

How to center the label in MUI Textfield

Here is how I was able to solve your issue (updated code).

const StyledTextField = styled(TextField)({
  "& .MuiInputLabel-root": {
    right: 0,
    textAlign: "center"
  },
  "& .MuiInputLabel-shrink": {
    margin: "0 auto",
    position: "absolute",
    right: "0",
    left: "0",
    top: "-3px",
    width: "150px", // Need to give it a width so the positioning will work
    background: "white" // Add a white background as below we remove the legend that had the background so text is not meshing with the border
    // display: "none" //if you want to hide it completly
  },
  "& .MuiOutlinedInput-root.Mui-focused": {
    "& legend ": {
      display: "none"
    }
  }
});

export default function BasicTextFields() {
  return (
    <StyledTextField
      helperText="Privacy Policy "
      InputProps={{
        inputProps: {
          style: { textAlign: "center" }
        }
      }}
      margin="normal"
      fullWidth
      id="email"
      label="Email Address"
      name="email"
      autoComplete="email"
      autoFocus
    />
  );
}

Here is the UPDATED codesandbox to try it. Let me know what you think.

How to create a label inside an input element?

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

A better example would be the SO search button! That's where I got this code from. Viewing page source is a valuable tool.

---

Related Topics