React Material-UI (MUI) is a popular library that provides a set of reusable components for building user interfaces in React applications. These components are based on Material Design, a design system developed by Google that provides guidelines for creating visually appealing, user-friendly interfaces.
The Input components in MUI is a standard input field that can be used to gather information from the user.
MUI provides various types of Input Components:
|
Component |
Description |
| AutoComplete | Used for providing suggestions while the user types in a text input. |
| Button | This component refers to a clickable UI element that triggers an action or navigation. |
| Button group | The ButtonGroup component is used to group the related buttons. |
| Checkbox | Used for selecting a boolean value (yes/no, on/off). |
| FAB | “FAB” in MUI stands for “Floating Action Button”. It’s a circular, floating button that performs the main action on an application’s screen. |
| Radio button | Used for selecting a single value from a list of options. |
| Rating | This component allows users to rate or evaluate something by selecting a number of stars or other similar symbols. |
| Select | Used for selecting a value from a list of options. |
| Slider | Used for selecting a value from a continuous range of values. |
| Switch | Used for selecting a binary option (on/off). |
| Text field | Used for text input and can include features like validation, placeholder text, and error messages. |
| Transfer list | This component allows the user to transfer items between two lists, usually with the option to select items and move them back and forth. |
| Toggle button | This component refers to a button that can be switched on or off, similar to a switch. It’s often used to represent a binary option or setting. |
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app example
Step 2: After creating your project folder i.e. example, move to it using the following command:
cd example
Step 3: MUI installation, now from the root directory of your project in the terminal, run the following command
npm install @mui/material @emotion/react @emotion/styled
Project Structure: It will look like this.
Example: In this example, we are going to see the combo box type of auto-complete in which we have a list of predefined values. Which will come as a suggestion on typing the value. We will be only able to choose the one which is there in a predefined list of values. Other than that we cannot choose any other values.
Filename: App.js
Javascript
import logo from './logo.svg'; import './App.css'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; const topFilms = () => [ { label: 'The Shawshank Redemption', year: 1994 }, { label: 'The Godfather', year: 1972 }, { label: 'The Godfather: Part II', year: 1974 }, { label: 'The Dark Knight', year: 2008 }, { label: '12 Angry Men', year: 1957 }, { label: "Schindler's List", year: 1993 }, { label: 'Pulp Fiction', year: 1994 }, { label: 'The Lord of the Rings: The Return of the King', year: 2003, }, { label: 'The Good, the Bad and the Ugly', year: 1966 } ]; function App() { return ( <div className="App"> <p>The autocomplete example 1 : with predefined set of inputs</p> <Autocomplete disablePortal id="combo-box-demo" options={topFilms()} sx={{ width: 400 }} renderInput={(params) => <TextField {...params} label="Movie" />} /> </div> ); } export default App; |
Step to run the application: Use the following command to run the application.
npm start
Output:
