Site icon RemoteStack

How to Build and Use Material UI Select Dropdown in React

A select element comes from a selection controls a family of checkboxes, toggle switches, radio buttons, and a dropdown list.

In today’s article we will discuss about select dropdown in React. Hence, we will ascertain how to create a select component in React using React Material UI library.

React MUI offers various methods to uplift the customization of the select component.

Select components are used when you need to retrieve specific options from a list of options. In React, we can create any functionality in a separate class or function. We will create and use a function component to build the select in React.

Create React Application

If you have not created a React app yet make sure to run the following command to build a new app.

npx create-react-app react-blog

Configure React Material UI

You have to install the React Material UI library using the below command.

npm install @mui/material @emotion/react @emotion/styled @fontsource/roboto

Head over to App.css file, you need to install the given code to the file to register the React MUI module.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";

Build New Component

Let us get inside the src/ directory, you have to create the features/ folder along with Home.js file.

Add the given code to the Home component file.

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

Create React MUI Select Component

To understand the core philosophy of selection control, we are going to implement a very basic select dropdown in React using React MUI.

Insert following code in features/Home.js file.

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

export default function Home() {
  const [weight, setWeight] = React.useState("");

  const handleChange = (event) => {
    setWeight(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 150 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Weight</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={weight}
          label="Weight"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

Handle Multi Selection with Select Checkmarks

React MUI allows the user to make multiple selections simultaneously with the Select component.

We are using multiple props to invoke multiple selections at a time.

import * as React from "react";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import ListItemText from "@mui/material/ListItemText";
import Select from "@mui/material/Select";
import Checkbox from "@mui/material/Checkbox";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

const names = [
  "Oliver Hansen",
  "Van Henry",
  "April Tucker",
  "Ralph Hubbard",
  "Omar Alexander",
  "Carlos Abbott",
  "Miriam Wagner",
  "Bradley Wilkerson",
  "Virginia Andrews",
  "Kelly Snyder",
];

export default function Home() {
  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    setPersonName(
      // On autofill we get a stringified value.
      typeof value === "string" ? value.split(",") : value
    );
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          id="demo-multiple-checkbox"
          multiple
          value={personName}
          onChange={handleChange}
          input={<OutlinedInput label="Tag" />}
          renderValue={(selected) => selected.join(", ")}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem key={name} value={name}>
              <Checkbox checked={personName.indexOf(name) > -1} />
              <ListItemText primary={name} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

Register Home Component

If you remember we created a separate Home component and used it to form the select component.

It won’t work until or unless we imported and register it inside the App.js file.

import React from "react";
import Home from "./features/Home";

function App() {
  return (
    <div>
      <h2>React Material UI Select Component Example</h2>
      <Home />
    </div>
  );
}

export default App;

View App on Browser

We have shown you how to quite easily implement React MUI Select Dropdown in the React application and form a new component.

At the same time it lets you make the selection from a dropdown list.

Now, comes the time when we check this feature on the browser.

Hence execute given command to run the app.

npm start

For local users; use mentioned below url to see the app on the browser.

http://localhost:3000

Exit mobile version