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>
  )
}

Properties