Switch - React

function Example() {
  const [tailoredChecked, setTailoredChecked] = React.useState(true);
  const [commsChecked, setCommsChecked] = React.useState(false);

  const toggleTailoredChecked = (event) => {
    event.stopPropagation();
    setTailoredChecked(!tailoredChecked);
  }
  const toggleCommsChecked = (event) => {
    event.stopPropagation();
    setCommsChecked(!commsChecked);
  }

  return (
    <>
      <Flex $marginBottom={5}>
        <Switch
          id="taylor-switch"
          aria-checked={tailoredChecked}
          aria-labelledby="taylor-switch-label"
          onClick={toggleTailoredChecked}
          $checked={tailoredChecked}
        />
        <Text
          htmlFor="taylor-switch"
          id="taylor-switch-label"
          as="label"
        >
          Tailor my Sky iD services and advertising
        </Text>
      </Flex>
      <Flex>
        <Switch
          id="comms-switch"
          aria-checked={commsChecked}
          aria-labelledby="comms-switch-label"
          onClick={toggleCommsChecked}
          $checked={commsChecked}
        />
        <Text
          htmlFor="comms-switch"
          id="comms-switch-label"
          as="label"
        >
          Send communications to my Sky iD email
        </Text>
      </Flex>
    </>
  );
}

function Example() {
  const [darkmodeChecked, setDarkmodeChecked] = React.useState(false);
  const [mobileChecked, setMobileChecked] = React.useState(true);

  const toggleDarkmodeChecked = (event) => {
    event.stopPropagation();
    setDarkmodeChecked(!darkmodeChecked);
  }
  const toggleMobileChecked = (event) => {
    event.stopPropagation();
    setMobileChecked(!mobileChecked);
  }

  return (
    <Flex $width="320px" $flexDirection="column">
      <Flex $marginBottom={5} $justifyContent="space-between">
        <Text
          htmlFor="darkmode-switch"
          id="darkmode-switch-label"
          as="label"
          $color="disabled"
        >
          Dark mode (disabled)
        </Text>
        <Switch
          id="darkmode-switch"
          aria-checked={darkmodeChecked}
          aria-labelledby="darkmode-switch-label"
          onClick={toggleDarkmodeChecked}
          $checked={darkmodeChecked}
          disabled
          />
      </Flex>
      <Flex $justifyContent="space-between">
        <Text
          htmlFor="mobile-switch"
          id="mobile-switch-label"
          as="label"
        >
          Mobile data
        </Text>
        <Switch
          id="mobile-switch"
          aria-checked={mobileChecked}
          aria-labelledby="mobile-switch-label"
          onClick={toggleMobileChecked}
          $checked={mobileChecked}
          />
      </Flex>
    </Flex>
  );
}

<Flex>
    <Switch
      id="advertising-switch"
      aria-checked={checked}
      aria-labelledby="advertising-switch-label"
      $checked
    />
    <Text
      htmlFor="advertising-switch"
      id="advertising-switch-label"
      as="label"
      $marginLeft={2}
    >
      Tailor my Sky iD advertising and services
    </Text>
  </Flex>

<Flex>
    <Switch
      id="communication-switch"
      aria-labelledby="communication-switch-label"
      disabled
      $marginRight={2}
    />
    <Text
      htmlFor="communication-switch"
      id="communication-switch-label"
      as="label"
      $color="grey50"
    >
      Send communications to my Sky iD email
    </Text>
  </Flex>