Switch enables a user to quickly toggle between two states.

Switch is similar to a radio group in function but is used for quickly toggling between binary actions. Switch must always be accompanied by a label, and follows the same keyboard workflow as a checkbox.

Switch can be used in a or you can add a label by using:

• aria-label
• aria-labelledby={id of text on the page that labels the Switch}>

() => {
  const [checked, setChecked] = useState(false);
  const toggle = () => setChecked(!checked);

  return (
    <Box display="flex" justifyContent="center" alignItems="center">
      <Label htmlFor="spike-alerts">Enable spike alerts?</Label>

      <Switch id="spike-alerts" checked={checked} onClick={toggle} ml={300} />
    </Box>
  );
};

For asynchronous actions, Switch can be used with an intermediate loading state while you await a response.

() => {
  const [checked, setChecked] = useState(false);
  const [loading, setLoading] = useState(false);

  const toggle = () => {
    setTimeout(() => {
      setLoading(false);
      setChecked(!checked);
    }, 2000);
    setLoading(true);
  };

  return (
    <div>
      <Label htmlFor="spike-alerts">Enable all filter tags?</Label>
      <Switch
        id="spike-alerts"
        loading={loading}
        checked={checked}
        onClick={toggle}
      />
    </div>
  );
};

Properties