How to make mui textfield with checkbox in react js?

Hi 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.


Install the following packages to use mui textfield in react js.


npm install @mui/material @emotion/react @emotion/styled


yarn add @mui/material @emotion/react @emotion/styled

MUI material textfield make with checkbox example.

The code below is an example of creating a mui textfield using a checkbox.


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) => {

  return (
    <Box sx={{ '& > :not(style)': { m: 1 } }}>
      <FormControl variant="standard">
        <InputLabel htmlFor="input-with-icon-adornment">
          With a start adornment
            <InputAdornment position="start">
                inputProps={{ 'aria-label': 'controlled' }}

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.

React, Mui Textfield checkbox

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts