I'm working on styling a text field in MUI to achieve the look shown in the image below:
https://i.sstatic.net/JHhpf.png
However, my current implementation looks like this:
https://i.sstatic.net/5N7hH.png
Currently, when I click inside the text field, the placeholder slides up and is positioned within the border. But I want it to appear as shown in the first image where the placeholder is at the top left corner of the box.
I'm utilizing MUI's TextField component: https://mui.com/material-ui/react-text-field/
If anyone has any insights on how to achieve this, I'd greatly appreciate it!
Here is the code snippet:
CustomField.jsx
import React from "react"
import { styled } from "@mui/material/styles"
import TextField from "@mui/material/TextField"
const StyledTextField = styled(TextField)(({ width, marginTop }) => ({
width: width || "343px",
marginTop: marginTop || "25px",
"& .MuiOutlinedInput-root": {
"&:focus-within fieldset": {
borderColor: "black",
color: "black",
},
},
"&:focus-within .MuiFormLabel-root": {
color: "black",
},
}))
const CustomTextField = ({ label, variant, helperText, value, onChange, disabled, width, marginTop }) => (
<StyledTextField
label={label}
variant={variant}
helperText={helperText}
value={value}
onChange={onChange}
disabled={disabled}
width={width}
marginTop={marginTop}
/>
)
export default CustomTextField
App.jsx
const App = () => {
const handleEmailChange = () => {};
const email = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f782849285b7929a969e9bd994989a">[email protected]</a>;
return (
<CustomTextField
label="Phone number or email"
variant="outlined"
helperText="Some helper text."
onChange={handleEmailChange}
value={email}
/>
)
}