Create MUI TextField Next to Label - reactjs

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.

you can apply a flex style to your Form or wrap your Textfield in a div with an InputLabelin 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

I tried the above solutions and these are not working in Mui-v5.
You can use Grid.
<Grid container direction="row" alignItems="center" spacing={2}>
<Grid item>
<div>Label</div>
</Grid>
<Grid item>
<div>Input</div>
</Grid>
</Grid>
You can adjust spacing and alignment accordingly.

Related

the styling rules inside my makeStyle Materiel UI not working

I want to apply the field class on the TextField Components. but the margins do not apply.
My code is like below:
import React from 'react';
import { Typography, Button, Container, TextField } from '#mui/material';
import SendIcon from '#mui/icons-material/Send';
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles({
field : {
marginTop: 20,
marginBottom: 20,
display: 'block'
}
});
export default function Create() {
const classes = useStyles();
return (
<Container>
<Typography
variant="h6"
component="h2"
color="textSecondary"
gutterBottom
>
Create new page
</Typography>
<form noValidate autoComplete='off'>
<TextField
className={classes.field}
label='Note title'
variant='outlined'
color='secondary'
fullWidth
required
/>
<TextField
className={classes.field}
label='Note Details'
variant='outlined'
color='secondary'
fullWidth
multiline
rows={4}
required
/>
</form>
<Button
type = 'sybmit'
variant = 'contained'
color = 'secondary'
endIcon = {<SendIcon />}
>
Submit
</Button>
</Container>
)
}
On v5 MUI deprecated the #mui/styles styling solutions. On the documentation, they put this message,
⚠️ #mui/styles is the legacy styling solution for MUI. It is deprecated in v5. It depends on JSS as a styling solution, which is not used in the #mui/material anymore. If you don't want to have both emotion & JSS in your bundle, please refer to the #mui/system documentation which is the recommended alternative.
And here is their new solution for styling components - https://mui.com/system/styled/

I wanna to add a little gap on two TextField in Material-UI

Here is my js file, I wanna add a little gap between them like padding. Many people are using box property to declare margin and padding but I don't know why I can't use the box property perfectly. If I use box property like ml={1} then the TextField is upside down. Don't forget the most important part is I wanna use this on a class component, not on a functional component.
<Grid item
xs={12}
sm={6}
md={6}
lg={6}
xl={6}>
<TextField label="Name"
variant="outlined"
color="primary"
size="small"
autoFocus />
<TextField label="Address"
variant="outlined"
color="primary"
size="small"
multiline
rowsMax={1} />
</Grid>
One of the ways to solve is using makeStyles. I have given the complete code. Please review. I have referred to Material UI: Use theme in React Class Component sample for Class Component.
Complete Code using Function Component:
import './App.css';
import React from 'react';
import Grid from '#material-ui/core/Grid';
import { TextField } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
control: {
padding: theme.spacing(2),
},
}));
const App = () => {
const classes = useStyles();
return (
<div className="App">
<h1>Hello MERN !!</h1>
<br />
<Grid item xs={12} sm={6} md={6} lg={6} xl={6}>
<TextField label="Name"
className={classes.control}
variant="outlined"
color="primary"
size="small"
autoFocus />
<TextField label="Address"
variant="outlined"
className={classes.control}
color="primary"
size="small"
multiline
rowsMax={1} />
</Grid>
</div >
);
}
export default App;
Complete Code using Class Component:
import React from 'react';
import Grid from '#material-ui/core/Grid';
import { TextField } from '#material-ui/core';
import { withStyles } from "#material-ui/core/styles";
const styles = theme => ({
root: {
padding: theme.spacing(2),
}
});
class Car extends React.Component {
render() {
const { classes } = this.props;
return (
<>
<Grid item xs={12} sm={6} md={6} lg={6} xl={6}>
<TextField label="Name"
variant="outlined"
className={classes.root}
spacing={3}
color="primary"
size="small"
autoFocus />
<TextField label="Address"
variant="outlined"
className={classes.root}
spacing={3}
color="primary"
size="small"
multiline
rowsMax={1} />
</Grid>
</>
);
}
}
export default withStyles(styles, { withTheme: true })(Car);
Make sure your Grid item property in a Grid container.You have to wrap the Grid item property in a Grid Container Property.

Material UI OutlinedInput label is invisible

We are using OutlinedInput from Material UI, but text labels are not rendered. How to fix this?
import { Grid, OutlinedInput } from '#material-ui/core';
<Grid container>
<Grid item xs={12}>
<OutlinedInput
label="invisible label"
placeholder="HELLO, STACKOVERFLOW!"
value={value}
onChange={(e) => handleValueChange(e.target.value)}
fullWidth
/>
</Grid>
</Grid>
instead of expected "invisible label" text, an empty space is rendered (top left corner):
Like #Daniel L mentioned, you have to use the InputLabel component within the FormControl component, but in addition to his answer - I had to add a label attribute on my OutlinedInput component so that the outline on the input would not overlap with my label.
Code without the label attribute:
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor='display-name'>Display Name</InputLabel>
<OutlinedInput
id="display-name"
value={displayName}
onChange={(e) => handleInputChange(e)}
aria-describedby="base-name-helper-text"
inputProps={{
'aria-label': 'weight',
}}
/>
</FormControl>
Code WITH the label attribute:
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor='display-name'>Display Name</InputLabel>
<OutlinedInput
id="display-name"
value={displayName}
label='Display Name'
onChange={(e) => handleInputChange(e)}
aria-describedby="base-name-helper-text"
inputProps={{
'aria-label': 'weight',
}}
/>
</FormControl>
I don't think this component is meant to be used on its own. In the MUI docs, it is primarily used as augmentation for other components such as TextField
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
If you inspect the styles in dev tools, it looks like the CSS property visibility: hidden is causing this issue. In fact, if you remove that style, you will see that the label works.
However, if you have already built the majority of your app with this component and you need to show that label, just override it with MUI's styling solutions such as makeStyles. In addition, use notched prop to allocate space for it
const useStyles = makeStyles({
customInputLabel: {
"& legend": {
visibility: "visible"
}
}
});
export default function App() {
const classes = useStyles();
return (
<div className="App">
<Grid container>
<Grid item xs={12}>
<OutlinedInput
classes={{ notchedOutline: classes.customInputLabel }}
label="visible label"
placeholder="HELLO, STACKOVERFLOW!"
fullWidth
notched
/>
</Grid>
</Grid>
</div>
);
}
I had the same issue and I wrapped OutlinedInput into the FormControl element and attached InputLabe component as a label and that fixed my issue.
The quick answer to this is basically wrapping the component under a FormControl and adding an InputLabel on top of the OutlinedInput component.
Based on your code, it should look like this:
<Grid container>
<Grid item xs={12}>
<FormControl>
<InputLabel htmlFor="outlined-adornment">Some text</InputLabel>
<OutlinedInput
id="outlined-adornment"
placeholder="HELLO, STACKOVERFLOW!"
value={value}
onChange={(e) => handleValueChange(e.target.value)}
fullWidth
/>
</FormControl>
</Grid>
</Grid>

How do I set a width for the TextAreaAutoSize component in Material-UI?

I can't find any info anywhere on how to change the default width of a TextAreaAutosize component in material-ui.
It seems the only choice is to have this little box. Does anyone know of a better text area auto size component I can use, or how to change the width of the TextAreaAutoSize component?
The API doesn't show any properties that have anything to do with 'className'. I tried to use it anyway and it was ignored. I also tried wrapping the component in a Box, and styling that, but it was ignored by the TextArea.
Any help would be greatly appreciated!
Resizing by the user is turned off (via resize: "none") for TextField here in InputBase: https://github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui/src/InputBase/InputBase.js#L140.
Below is an example of how to turn it back on:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const useStyles = makeStyles(theme => ({
root: {
"& .MuiTextField-root": {
margin: theme.spacing(1)
}
},
textarea: {
resize: "both"
}
}));
export default function MultilineTextFields() {
const classes = useStyles();
return (
<form className={classes.root} noValidate autoComplete="off">
<div>
<TextField
id="outlined-textarea"
label="Multiline Placeholder"
placeholder="Placeholder"
multiline
variant="outlined"
inputProps={{ className: classes.textarea }}
/>
</div>
</form>
);
}
CSS documentation for resize: https://developer.mozilla.org/en-US/docs/Web/CSS/resize
Multiline TextField demos: https://material-ui.com/components/text-fields/#multiline
You can change the style prop of the TextareaAutosize check here
<TextareaAutosize
rowsMin={3}
placeholder=''
defaultValue=''
style={{ width: "100%" }}
/>
I was able to get it to work thanks to Ryan Cogswell. Stupid me, though I wrapped the textarea in a box and applied className to the box (which didn't work), I should have applied it to the textareaautosize directly.
There's a bug in VSCODE Intellisense where it shows 'classes' as a property but not 'className' so I assumed it didn't exist.
Here's the code:
const FormStyles = makeStyles((theme) => ({
root: {
width: '100%',
},
button: {
marginTop: '20px',
marginRight: theme.spacing(1),
},
buttons: {
display: 'flex',
justifyContent: 'flex-end'
},
textarea: {
width: '100%',
},
}));
<TextareaAutosize
rowsMin={3}
aria-label={info.label}
name={info.name}
placeholder=''
defaultValue=''
className={classes.textarea}
/>
I could not get the drag icon to show up in textfield, so didn't use it. But I would appreciate an example of textfield using multiline and resizing.
Thanks Ryan!
Here's the trick I used. I wrapped it in a flex container and used align-items to stretch the width to cover the size of that container.
<Stack
direction="column"
justifyContent="center"
alignItems="stretch"
spacing={2}
>
<TextareaAutosize
label='Title'
value={pub.title || ''}
onChange={(e) => pub.title = e.target.value}
variant='outlined'
sx={{m: 1}}
size='small'
/>
</Stack>

ReactJS Material UI aligning form field center

I am going through a trouble to align my react form to center.
This is my form:
I am using reactjs Material UI
<Grid item xs={12}>
<Grid item xs={12}>
<FormGroup noValidate autoComplete="on">
<TextField
label="SSN"
type="number"
className={classes.textField}
name='ssn'
/>
</FormGroup>
</Grid>
</Grid>
i am trying to align the form to center.
If you want to see entire component, this is the component that contain the form
import React from 'react';
import TextField from '#material-ui/core/TextField';
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
import Button from '#material-ui/core/Button';
import useStyles from '../src/styleMaker'
import { connect } from "react-redux";
import { FormGroup } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
function App(props) {
const useStyles = makeStyles(theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
},
}));
const classes = useStyles();
return (
<React.Fragment>
<div className={classes.container}>
<Grid item xs={12}>
<Grid item xs={12}>
<FormGroup noValidate autoComplete="on">
<TextField
label="SSN"
type="number"
className={classes.textField}
name='ssn'
/>
</FormGroup>
</Grid>
</Grid>
</div>
</React.Fragment>
);
}
export default App;
Can anyone help me to make this form to center? I tried whole day long but i failed to align.
If you use to make form centered horizontally, add following style to makeStyles
formGroup: {
alignItems: 'center'
}
and assign formGroup class name to <FormGroup>
<FormGroup className={classes.formGroup} noValidate autoComplete="on">
<TextField
label="SSN"
type="number"
className={classes.textField}
name='ssn'
/>
</FormGroup>
Here is working form
If you want to center it vertically and horizontally, the easiest way is to make some root <div> positioned absolutely and set width and height to 100%. This makes <div> to occupy whole screen. Then you can use justify-content and align-items to center form.
container: {
display: "flex",
flexWrap: "wrap",
position: "absolute",
top: 0,
left: 0,
height: "100%",
width: "100%",
alignItems: "center"
},
Here is working form, that is aligned to center both horizontally and vertically

Resources