How to make mui textfield with checkbox in react js?
November 27, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To make mui textfield with a checkbox, use textfield with startadornment and pass your checkbox in startadornment. It will make mui textfield with a checkbox.
Today, I am going to show you, how to make mui textfield with checkbox in react js.
Installation
Install the following packages to use mui textfield in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledMUI material textfield make with checkbox example.
The code below is an example of creating a mui textfield using a checkbox.
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
import Input from '@mui/material/Input';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import FormControl from '@mui/material/FormControl';
import Checkbox from '@mui/material/Checkbox';
export default function InputWithIcon() {
const [checked, setChecked] = React.useState(true);
const handleChange = (event) => {
setChecked(event.target.checked);
};
return (
<Box sx={{ '& > :not(style)': { m: 1 } }}>
<FormControl variant="standard">
<InputLabel htmlFor="input-with-icon-adornment">
With a start adornment
</InputLabel>
<Input
id="input-with-icon-adornment"
startAdornment={
<InputAdornment position="start">
<Checkbox
checked={checked}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
</InputAdornment>
}
/>
</FormControl>
</Box>
);
}In the above code example, I have used the @mui/material TextField component and made mui checkbox of MUI Textfield.
Check the output of the above code example.
All the best 👍