Replacing checkboxes with switches

Material-UI has a control which is very similar to a checkbox, called a switch. The main visual distinction between the two components is that a switch has more emphasis on the toggling on/off action. In a mobile environment, users might feel more accustomed to the Switch component. In any other environment, you're probably best sticking with regular Checkbox components.

How to do it...

Let's say that, instead of creating a component that abstracts a group of Checkbox components, you you want want to do the same thing with the Switch components. Here's the code:

import React, { Fragment, useState } from 'react';

import FormLabel from '@material-ui/core/FormLabel...