React MUI Input Components

0 0 3 minutes read

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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!