React MUI Input Components

React MUI Input Components are various types of Input Components along with enhanced styling and functionalities provided by the React Material-UI (MUI).

The MUI Input components refer, to a standard input field that can be used to gather information from the user. These are various types of input components including Autocomplete, Buttons, Checkbox, Radio, Select, and many More.

These are similar to HTML input tag but with some extra functionalities.

Syntax:

<Autocomplete               // Use InputComponent Name
  id="demo"
  sx={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>

React MUI Input Components Types

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.

React MUI Input Components 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.

Javascript

// Filename - App.js

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: