React MUI ToggleButtonGroup API

React MUI 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 are going to discuss the React MUI ToggleButtonGroup API. ToggleButtonGroup is used to group the ToggleButtons. The ToggleButtonGroup API provides a lot of customizations like styling, functionality, etc. ToggleButtonGroups let us select either a single or multiple options.

Syntax:

import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
// or
import { ToggleButtonGroup } from '@mui/material';

Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.

• children: It is a component similar to the table row.
• classes: This overrides the existing styles or adds new styles to the component.
• component: It is the component used for the root node. It can be either an HTML string or a component.
• value: This is the value of the button.
• color: This is the colour of the ToggleButton.
• disabled: If set to true, the toggle button is disabled.
• fullWidth: If set to true, the toggle button will take the full width of the container.
• onChange: The callback function when the toggle button is changed.
• onClick: The callback function when the toggle button is clicked.
• selected: If set to true, the button is in the active state.
• size: Specifies the size of the button.
• sx: The system prop allows defining system overrides as well as additional CSS styles. 
• orientation: It is the component orientation.

Syntax: Create a ToggleButtonGroup as follows:

<ToggleButtonGroup value={alignment}>
    <ToggleButton value="Data Structures">
            Data Structures
    </ToggleButton>
    <ToggleButton value="Algorithms">
            Algorithms
    </ToggleButton>
    <ToggleButton value="Web Development">
            Web Development
    </ToggleButton>
</ToggleButtonGroup>

Installing and Creating React app, and adding the MUI dependencies.

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react @emotion/styled @mui/lab

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have single select options in the toggle button group.

App.js

import "./App.css";
import * as React from "react";

import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import { useState } from "react";

function App() {
    const [val, setVal] = useState();

    const handleChange = (event, newAlignment) => {
        setVal(newAlignment);
    };
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI ToggleButtonGroup API</strong>
                <br />
                <br />
            </div>
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <ToggleButtonGroup value={val} exclusive
                    onChange={handleChange}>
                    <ToggleButton value="Data Structures">
                        Data Structures
                    </ToggleButton>
                    <ToggleButton value="Algorithms">
                        Algorithms
                    </ToggleButton>
                    <ToggleButton value="Web Development">
                        Web Development
                    </ToggleButton>
                </ToggleButtonGroup>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: In the following example, we have the multi-select option from the ToggleButtonGroup.

App.js

import "./App.css";
import * as React from "react";

import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import { useState } from "react";

function App() {
  const [tuts, setTuts] = React.useState(() => [
    "Data Structures",
    "Algorithms",
  ]);

  const handleChange = (event, newFormats) => {
    setTuts(newFormats);
  };
  return (
    <div className="App">
      <div
        className="head"
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <h1
          style={{
            color: "green",
          }}
        >
          GeeksforGeeks
        </h1>
        <strong>React MUI ToggleButtonGroup API</strong>
        <br />
        <br />
      </div>
      <div
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <ToggleButtonGroup value={tuts}
            onChange={handleChange}>
          <ToggleButton value="Data Structures">
              Data Structures
          </ToggleButton>
          <ToggleButton value="Algorithms">
              Algorithms
          </ToggleButton>
          <ToggleButton value="Web Development">
              Web Development
          </ToggleButton>
        </ToggleButtonGroup>
      </div>
    </div>
  );
}

export default App;

Output:

Reference: https://mui.com/material-ui/api/toggle-button-group/