Switch - React

View on Figma View on GitHub

import { Switch } from '@sky-uk/ui-core';

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"
          label="Tailor my Sky iD services and advertising"
          onClick={toggleTailoredChecked}
          $checked={tailoredChecked}
        />
      </Flex>
      <Flex>
        <Switch
          id="comms-switch"
          aria-checked={commsChecked}
          aria-labelledby="comms-switch-label"
          label="Send communications to my Sky iD email"
          onClick={toggleCommsChecked}
          $checked={commsChecked}
        />
      </Flex>
    </>
  );
}

Right-aligned Example

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

Props

$checked

boolean value that toggles the Switch on and off. If this prop isn't used the $checked value of the switch will be handeled internally.

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

defaultChecked

boolean value that controls the switches state on initial render.

<Flex>
    <Switch
      id="advertising-switch"
      aria-labelledby="advertising-switch-label"
      defaultChecked
      label="Tailor my Sky iD advertising and services"
    />
  </Flex>

disabled

The disabled attribute should be used sparingly when submitting the form.

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

$loading (deprecated)

boolean value enables loading state. This has been deprecated in favour of setting the native disabled attribute, this is more semantic and inclusive however should still be used carefully.

System Modifiers

The Switch component also supports the props applied using the following system functions:

Translatable Fields

The Switch component has default state labels "ON/OFF".

These labels could be translated using the the following fields:

switch.statusOn - label for checked status. Default value is ON
switch.statusOff - label for unchecked status. Default value is OFF

For more on translatable fields, view the useTranslation docs here: useTranslation