React Tutorial- React Material UI Switch Toggle Component Example

In this React Js tutorial, we will learn how to create a switch toggle component in React Js function component using the React Material UI Library.

A toggle component is an operating lever that can be pushed down, up, right or left. Likewise, in the user interface, we use Toggle Switch Buttons to turn on and off any state.

In UI, the toggle switch is a control that generally has two mutually exclusive states, e.g, ON and OFF. The design and usability of the Switch control are almost identical to the toggle lever.

How To Create And Customize Toggle Switch Button In React With Material UI

Step 1- Build A New Project

The first is just to create a new React project using npx create-react-app:

npx create-react-app react-blog-app

cd react-blog-app

Step 2- Install React Material UI Package

In this step, we will use the given commands. Both the commands will install React MUI and the Roboto font family in the React app:

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

npm install @fontsource/roboto

React MUI takes care of every aspect of the User Interface, it offers a Roboto Font default. We will import the Roboto font family in the App.css file:

@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";

Step 3- Create The Function Class

React offers greater flexibility when it comes to managing features or functionality. We can create any number of components to separate functionality.

Then, we make the components/ directory in the src folder after which we create the ToggleSwitch.js file:

import React from 'react'
function ToggleSwitch() {
  return (
    <div>ToggleSwitch</div>
  )
}
export default ToggleSwitch

Step 4- Create Toggle Switch Button

In this step, we will import the Switch Component from the ‘@mui/material/Switch’ library. Inside the return method, we will define the Switch Property and make sure to pass the label prop inside the component.

Afterward, we need to insert the below code to the components/ToggleSwitch.js file:

import * as React from "react";
import Switch from "@mui/material/Switch";
const label = { inputProps: { "aria-label": "Switch demo" } };
export default function ToggleSwitch() {
  return (
    <div>
      <Switch {...label} defaultChecked />
      <Switch {...label} />
      <Switch {...label} defaultChecked />
      
    </div>
  );
}

Step 5- Build Label Switch Toggle

We will offer a label to the Switch Toggle Component using the FormControlLabel Property.

For that, we have to import FormControlLabel from the ‘@mui/material/FormControlLabel’ package along with the FormGroup and Switch props:

import * as React from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
export default function ToggleSwitch() {
  return (
    <FormGroup>
      <FormControlLabel control={<Switch defaultChecked />} label="Label" />
      <FormControlLabel disabled control={<Switch />} label="Disabled" />
    </FormGroup>
  );
}

Step 6- Customize The Switch Button

We can easily change the Switch Button size, and pass the size property to the Switch component as given below:

import * as React from 'react';
import Switch from '@mui/material/Switch';
const label = { inputProps: { 'aria-label': 'Size switch demo' } };
export default function ToggleSwitch() {
  return (
    <div>
      <Switch {...label} defaultChecked size="small" />
      <Switch {...label} defaultChecked />
    </div>
  );
}

On the other hand, we can simply add color to the Switch button using the color property:

import * as React from 'react';
import { alpha, styled } from '@mui/material/styles';
import { pink } from '@mui/material/colors';
import Switch from '@mui/material/Switch';
const GreenSwitch = styled(Switch)(({ theme }) => ({
  '& .MuiSwitch-switchBase.Mui-checked': {
    color: pink[600],
    '&:hover': {
      backgroundColor: alpha(pink[600], theme.palette.action.hoverOpacity),
    },
  },
  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
    backgroundColor: pink[600],
  },
}));
const label = { inputProps: { 'aria-label': 'Color switch demo' } };
export default function ToggleSwitch() {
  return (
    <div>
      <Switch {...label} defaultChecked />
      <Switch {...label} defaultChecked color="secondary" />
      <Switch {...label} defaultChecked color="warning" />
      <Switch {...label} defaultChecked color="default" />
      <GreenSwitch {...label} defaultChecked />
    </div>
  );
}

Step 7- Disable Toggle Switch

Whenever we have to set the Toggle Button state to disable, we simply need to pass the disabled property to the component as given below:

import * as React from "react";
import Switch from "@mui/material/Switch";
const label = { inputProps: { "aria-label": "Switch demo" } };
export default function ToggleSwitch() {
  return (
    <div>
      <Switch {...label} disabled defaultChecked />
      <Switch {...label} disabled />
    </div>
  );
}

Step 8- Import Component In The App File

We have created the Switch button now. For showing it on the browser, we have to inject it inside the App.js main component file:

import React from "react";
import ToggleSwitch from "./components/ToggleSwitch";
function App() {
  return (
    <div>
      <h2>React Material UI Toggle Switch Example</h2>
      <ToggleSwitch />
    </div>
  );
}
export default App;

Step 9- Start The React App

In this last step, we will invoke the React app by using the given command:

npm start

React Material UI Switch Toggle Component Example Tutorial

Conclusion

In this React Js tutorial, we have seen how to create a simple Switch Toggle Button in React Js app with the help of React Material UI Library step-by-step.

Thanks