React MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.
In this article, we will discuss the React MUI InputUnstyled API. The InputUnstyled is an input field that can be changed to textarea as well, helping the user to fill in as well as edit information.
InputUnstyled Props:
- autoComplete: It helps to autofill the contents by the user.
- autoFocus: It is a boolean value. It determines whether the input element is focused during the first mount or not.
- className: The class name applied to the root element.
- component: component: The component used for the root node. Either a string to use an HTML element or a component.
- defaultValue: It defines the default value that is set.
- disabled: It is a boolean value. It determines whether the component is disabled or not.
- endAdornment: It signifies the trailing adornment for the input.
- error: It is a boolean value. It determines whether the helper text should be displayed in an error state or not. It is false by default.
- id: It is used to set the id of the element.
- maxRows: Maximum number of rows to display.
- minRows: Minimum number of rows to display.
- multiline: It is a boolean value. It determines whether to render textarea or not.
- name: The name of the input element.
- placeholder: The hint displayed in the input element.
- readOnly: It is a boolean value. It determines whether to let the user is able to change the value or not.
- required: It is a boolean value. It determines whether it is mandatory for the user to fill this field or not.
- rows: It determines the number of rows to display.
- slotProps: props used for each slot inside the Input.
- slots: It is either a string to use an HTML element or a component, used for each slot inside the InputBase.
- startAdornment: The leading adornment for the input.
- type: It is used to set the type of input element. The default value is text.
- value: The value of the input element.
Syntax:
<InputUnstyled/>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material npm install @emotion/react npm install @emotion/styled
Project Structure: It will look like the following.
Example 1: In this example, we are adding the InputUnstyled Component to it we are setting the name, id, rows, multiline, and placeholder props.
- App.js
Javascript
import InputUnstyled from '@mui/base/InputUnstyled'; export default function App() { return ( <div style={{ margin: 30 }}> <h1 style={{ color: "green" }}>neveropen</h1> <h4>React MUI InputUnstyled API</h4> <InputUnstyled name="input-unstyled" id="input-unstyled" rows={5} multiline={true} placeholder="Share your experiences...." /> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Example 2: We are creating two states email and disable using react hook useState, We have created a form that on submitting triggers the onSubmitHandler that shows the email in the alert box and changes the state of the disabled, i.e change it to true, making the input field disabled.
- App.js
Javascript
import InputUnstyled from '@mui/base/InputUnstyled'; import { useState } from 'react'; export default function App() { const [email, setEmail] = useState(''); const [disable, setDisable] = useState(false) const onSubmitHandler = (e) => { e.preventDefault(); alert('submitted :' + email); setDisable(true) } return ( <div style={{ margin: 10 }}> <h1 style={{ color: "green" }}>neveropen</h1> <h4>React MUI InputUnstyled API</h4> <p>User: gfg_22</p> <form onSubmit={onSubmitHandler}> <InputUnstyled name="email" id="email" placeholder='email' type="email" onChange={(e) => setEmail(e.target.value)} disabled={disable} required={true} /> </form> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Reference: https://mui.com/base/api/input-unstyled/
