React MUI Toggle Buttons Input

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Toggle Buttons Input. A toggle button is used to group the related options. The ToggleButtonGroup is used in controlling the selected state of its child buttons when given its own value prop.

React MUI Toggle Button Props:

• children: It is a component similar to the table row.
• classes: It overrides the existing styles or adds new styles to the component.
• component: It is the component used for the root node.
• sx: The system prop allows defining system overrides as well as additional CSS styles
• value: The value associated with the button when you select it in togglebuttongroup.
• color: It denotes the color of the ToggleButton.
• disabled: If set to true, the toggle button is disabled.
• disableFocusRipple: If set to true, the keyboard focus ripple is disabled.
• fullWidth: If set to true, the toggle button will take the full width of the container.
• onChange: It is a callback function when the toggle button is changed.
• onClick: It is a callback function when the toggle button is clicked.
• selected: If set to true, the button is in the active state.
• size: It specifies the size of the button.
• sx: It allows defining system overrides as well as additional CSS styles.

React MUI Toggle Button Group Props:

• children: It is a component similar to the table row.
• classes: It 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: It denotes the value of the button.
• color: It denotes the color 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: It is a callback function when the toggle button is changed.
• onClick: It is a callback function when the toggle button is clicked.
• selected: If set to true, the button is in the active state.
• size: It 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:

<ToggleButtonGroup>
    <ToggleButton value="left">
        ...
    </ToggleButton>
    <ToggleButton value="center">
        ...
    </ToggleButton>
</ToggleButtonGroup>

Creating React Project:

Step 1: To create a react app, you need to install react modules through npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Project Structure:

Step to Run Application: Open the terminal and type the following command. 

npm start

Example 1: Below example demonstrates the React MUI exclusive selection toggle button component of different sizes.

Javascript

import React from "react";
import FormatAlignLeftIcon from
    "@mui/icons-material/FormatAlignLeft";
import FormatAlignCenterIcon from
    "@mui/icons-material/FormatAlignCenter";
import FormatAlignRightIcon from
    "@mui/icons-material/FormatAlignRight";
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from
    "@mui/material/ToggleButtonGroup";

function App() {
    const [align, setAlign] = React.useState();

    const handleAlignment = (event, newAlign) => {
        setAlign(newAlign);
    };

    function ButtonGroup({ size }) {
        return (
            <ToggleButtonGroup
                size={size}
                value={align}
                exclusive
                onChange={handleAlignment}
                aria-label="text alignment"
            >
                <ToggleButton value="left"
                    aria-label="left aligned">
                    <FormatAlignLeftIcon />
                </ToggleButton>
                <ToggleButton value="center"
                    aria-label="centered">
                    <FormatAlignCenterIcon />
                </ToggleButton>
                <ToggleButton value="right"
                    aria-label="right aligned">
                    <FormatAlignRightIcon />
                </ToggleButton>
            </ToggleButtonGroup>
        );
    }

    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Toggle Button Input</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <ButtonGroup size="large" /> <br /><br />
                <ButtonGroup size="medium" /> <br /><br />
                <ButtonGroup size="small" />
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI vertically aligned multiple selection toggle buttons.

Javascript

import React from "react";
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import FormatBoldIcon from '@mui/icons-material/FormatBold';
import FormatItalicIcon from '@mui/icons-material/FormatItalic';
import FormatUnderlinedIcon from
    '@mui/icons-material/FormatUnderlined';

function App() {
    const [format, setFormat] = React.useState(() => ['bold']);

    const handleFormat = (event, newFormat) => {
        setFormat(newFormat);
    };

    return (
        <div>
            <div style={{ textAlign: "center",
                color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Toggle Button Input</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <ToggleButtonGroup
                    value={format}
                    onChange={handleFormat}
                    aria-label="text formatting"
                    orientation="vertical"
                >
                    <ToggleButton value="bold"
                        aria-label="left aligned">
                        <FormatBoldIcon />
                    </ToggleButton>
                    <ToggleButton value="italic"
                        aria-label="centered">
                        <FormatItalicIcon />
                    </ToggleButton>
                    <ToggleButton value="underline"
                        aria-label="right aligned">
                        <FormatUnderlinedIcon />
                    </ToggleButton>
                </ToggleButtonGroup>
            </div>
        </div>
    );
}

export default App;

Output:

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