Material UI — Switches

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add switches with Material UI.

Switches

Switches are toggles that let us set something on or off.

To add one, we use the Switch component.

For instance, we can write:

import React from "react";
import Switch from "@material-ui/core/Switch";

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <Switch checked={checked} onChange={handleChange} name="checked" />
    </div>
  );
}

We set the checked prop with the checked state.

onChange has a function that runs when we click on the toggle.

event.target.checked has the checked value so that we use it to change the checked state.

We can change the color with the color prop.

For example, we can write:

import React from "react";
import Switch from "@material-ui/core/Switch";

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <Switch
        color="primary"
        checked={checked}
        onChange={handleChange}
        name="checked"
      />
    </div>
  );
}

With the color prop, we changed the color.

primary is purple.

Also, we can disable it with the disabled prop.

For example, we can write:

import React from "react";
import Switch from "@material-ui/core/Switch";

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <Switch
        disabled
        checked={checked}
        onChange={handleChange}
        name="checked"
      />
    </div>
  );
}

With the disabled prop, users can’t interact with it.

Switch with FormControlLabel

To add a label with the switch, we can use the FormControlLabel component.

For example, we can write:

import React from "react";
import Switch from "@material-ui/core/Switch";
import FormControlLabel from "@material-ui/core/FormControlLabel";

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <FormControlLabel
        control={
          <Switch checked={checked} onChange={handleChange} name="checked" />
        }
        label="switch"
      />
    </div>
  );
}

to add a switch with a label to the right.

The label prop is the text for the label.

Switches with FormGroup

FormGroup s let us wrap a bunch of for,m controls into a group.

We can use these with switches.

For instance, we can write:

import React from "react";
import Switch from "@material-ui/core/Switch";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormLabel from "@material-ui/core/FormLabel";
import FormControl from "@material-ui/core/FormControl";
import FormGroup from "@material-ui/core/FormGroup";

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <FormControl component="fieldset">
        <FormLabel component="legend">choose</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={
              <Switch
                checked={checked}
                onChange={handleChange}
                name="checked"
              />
            }
            label="switch"
          />
        </FormGroup>
      </FormControl>
    </div>
  );
}

We have a FormGroup surrounding our FormControlLabel for the switch.

Sizes

We can change the size with the size prop.

For example, we can write:

import React from "react";
import Switch from "@material-ui/core/Switch";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormLabel from "@material-ui/core/FormLabel";
import FormControl from "@material-ui/core/FormControl";
import FormGroup from "@material-ui/core/FormGroup";

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <FormControlLabel
        control={
          <Switch size="small" checked={checked} onChange={handleChange} />
        }
        label="Small"
      />
    </div>
  );
}

to add a small switch.

We set size to small to make it small.

Customizable Switch

We can customize our switch with our own classes.

For example, we can write:

import React from "react";
import Switch from "@material-ui/core/Switch";
import { makeStyles } from "@material-ui/core/styles";
import { yellow } from "@material-ui/core/colors";

const useStyles = makeStyles({
  switchBase: {
    color: yellow[300],
    "&$checked": {
      color: yellow[500]
    },
    "&$checked + $track": {
      backgroundColor: yellow[500]
    }
  },
  checked: {},
  track: {}
});

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <Switch
        focusVisibleClassName={classes.focusVisible}
        disableRipple
        classes={{
          root: classes.root,
          switchBase: classes.switchBase,
          thumb: classes.thumb,
          track: classes.track,
          checked: classes.checked
        }}
      />
    </div>
  );
}

to make a switch with our own classes.

We have an object with switchBase property with styles for the color when it’s checked.

We set the color to yellow if it’s checked.

The background is also set to yellow.

Then we use the useStyles hook to get the classes and apply them to our Switch .

We can also pass any props into our Switch component as we wish.

Conclusion

We can add switches with different styles to let us add toggles for users to use.