React 18 Material UI Switch Toggle Component Example Tutorial

Last Updated on by in React JS

In this tutorial, you will learn how to create a switch toggle component in React JS function component using the React Material UI library.

A toggle Switch is an operating lever that can be pushed down, up, right or left. Similarly, in the user interface, we use the 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.

Switches toggle the state and change the state of the UI in contrast with on or off. Switches offer the most profound method to change settings on mobile.

How to Create and Customize Toggle Switch Button in React with Material UI

  • Step 1: Build New Project
  • Step 2: Install React Material UI Package
  • Step 3: Create Function Class
  • Step 4: Create Toggle Switch Button
  • Step 5: Build Label Switch Toggle
  • Step 6: Customize Switch Button
  • Step 7: Disable Toggle Switch
  • Step 9: Import Component in App File
  • Step 10: Start React App

Build New Project

The first step guides you on how to create a new React project simply. This will be the starting point from where we will evoke our journey.

The given command will show you how to manifest a new app on your system.

npx create-react-app react-blog-app
cd react-blog-app

Install React Material UI Package

Here we have given two separate commands; these commands will install React MUI and the Roboto font family n the React application.

npm i @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @fontsource/roboto --legacy-peer-deps

React MUI takes care of every aspect of the User Interface; It offers a Roboto font default; in this step, we are going to 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";

Create Function Class

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

Make the components/ directory in src folder then create the ToggleSwitch.js file.

import React from 'react'

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

export default ToggleSwitch

Create Toggle Switch Button

We are going to start by implementing a very simple Switch toggle button.

Import the Switch component from the ‘@mui/material/Switch’ library; Inside the return method, define the Switch property, and make sure to pass the label prop inside the component.

Insert given 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>
  );
}

Build Label Switch Toggle

We can offer a label to the Switch toggle component using the FormControlLabel property.

In such case, you have to import FormControlLabel from the ‘@mui/material/FormControlLabel’ package, along with 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>
  );
}

Customize Switch Button

We can anytime change the Switch button size; 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, you 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>
  );
}

Disable Toggle Switch

Sometimes, we have to set the Toggle button state to disable. Indeed it is effortless to convert the switch button state from active to disable.

Just pass the disabled property to the component as suggested 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>
  );
}

Import Component in App File

We have successfully created the Switch button component; it won’t show on the browser unless we injected 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;

Start React App

Before we run the app in the browser, we must invoke the React app using the given command.

This single command will start the app in the browser.

npm start
http://localhost:3000

React Material UI Switch Toggle Component Example Tutorial

Conclusion

In this guide, we have step by step explored how to create a simple Switch toggle button in React JS application with the help of React Material UI library from scratch.

We have learned how to change the switch colour and size, how to change the state of the Switch toggle button and most importantly.

How to create the label switch toggle in React.