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 InputLabel API. The InputLabel helps to add a label to the input field in the form for the users.
Import InputLabel API:
import InputLabel from '@mui/material/InputLabel';
// or
import { InputLabel } from '@mui/material';
InputLabel Props:
- children: It represents the content of the component.
- classes: it helps to override styles applied to the component.
- disabled: It is a boolean value. It determines whether the label text should be displayed in a disabled state or not. It is false by default.
- error: It is a boolean value. It determines whether the label text should be displayed in an error state or not. It is false by default.
- color: It sets the color of the component.
- disableAnimation: It is a boolean value. It determines whether the transition animation should be disabled or not. It is false by default.
- shrink: It is a boolean value. It determines whether the label should be shrunk or not. It is false by default.
- focused: It is a boolean value. It determines whether the label should use the focused classes key or not. It is false by default.
- required: It is a boolean value. It determines whether the label should use the required class key or not. It is false by default.
- size: It sets the size of the component. It can take either value normal’ or ‘small’.
- margin: sets margin to the InputLabel with respect to FormControl.
- sx: A superset of CSS that packages all of the style functions.
- variant: It sets the variant of the component. ‘filled’, ‘outlined’, or ‘standard’ one can use either of these values.
CSS Rules:
- root(.MuiInput-root): It is the style applied to the root element.
- focused(.Mui-focused): It is the style applied to the root element if the component is focused.
- required( .Mui-required): The style class applied to the root element if required={true}.
- asterisk (.MuiInputLabel-asterisk): The style class applied to the asterisk element.
- formControl (.MuiInputLabel-formControl): It is the style applied to the root element if the component is a descendant of FormControl.
- disabled(.Mui-disabled): It is the style applied to the root element if disabled is set to true.
- error(.Mui-error): It is the style class applied to the root element if the error is set to true.
- filled( .MuiInputLabel-filled ): The style applied to the root element if variant=”filled”.
- outlined (.MuiInputLabel-outlined): The style applied to the root element if variant=” outlined”.
- standard (.MuiInputLabel-standard): The style applied to the root element if variant=”standard”.
- sizeSmall(.MuiInputLabel-sizeSmall): It is the style applied to the input element if the size is set to small.
- shrink(.MuiInputLabel-shrink): It is the style applied to the input element if shrink={true}.
Syntax:
<InputLabel></InputLabel>
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 added two input fields along with InputLabel Component. To the first InputLabel we are adding the shrink prop and to the second InputLabel component we are adding the size and focused prop.
- App.js
Javascript
import { FormControl, InputLabel, Input } from '@mui/material'; export default function App() { return ( <div style={{ margin: 10 }}> <h1 style={{ color: "green" }}>neveropen</h1> <h4>React MUI InputLabel API</h4> <FormControl> <InputLabel shrink>Name:</InputLabel> <Input id="name" /> </FormControl> <FormControl style={{ marginLeft: 5 }}> <InputLabel size="normal" focused>Age:</InputLabel> <Input id="age" type='number' /> </FormControl> </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: In this example, we are creating three states using react hook useState naming name, text, and isBool. We are adding a function named onChangeHandler that checks whether the input text contains only a letter or not and changes the states. To the InputLabel component, we are passing isBool to the error prop. When we are typing anything in the input field the on-change function onChangeHandler gets triggered.
- App.js
Javascript
import { FormControl, InputLabel, Input } from '@mui/material'; import { useState } from 'react'; export default function App() { const [name, setName] = useState(''); const [text, setText] = useState('') const [isBool, setIsBool] = useState(true) const onChangeHandler = (e) => { setName(e.target.value); if (!name.match(/^[A-Za-z\s]*$/)) { setIsBool(true); setText('(error:allows letters)') } else { setIsBool(false); setText('(correct)') } console.log(isBool) } return ( <div style={{ margin: 10 }}> <h1 style={{ color: "green" }}>neveropen</h1> <h4>React MUI InputLabel API</h4> <FormControl> <InputLabel color={"success"} error={isBool}>Name {text}:</InputLabel> <Input id="my-input" onChange={onChangeHandler} /> </FormControl> </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/material-ui/api/input-label/
