---
title: "Switch — React"
canonical: https://sky-ui.cf.sky.com/components/switch/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Switch — React

Switch toggles the state of an item on or off.

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

---

```tsx
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

```tsx
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.

```tsx
  <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.

```tsx
  <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.

```tsx
  <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:

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)

---

## 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](/core/hooks/use-translation/)