Toggle

A SwiftUI Toggle component for displaying native toggles. Also called Switch (Universal).

Expo UI Toggle matches the official SwiftUI Toggle API and supports styling via the toggleStyle modifier.

Usage

Basic toggle

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';

export default function BasicToggleExample() {
  const [isOn, setIsOn] = useState(false);

  // A toggle row stretches to the width it is given, so give the host a size.
  return (
    <Host style={{ flex: 1 }}>
      <Toggle
        isOn={isOn}
        onIsOnChange={setIsOn}
        label="Enable feature"
      />
    </Host>
  );
}

A row labeled Enable feature with a switch turned off at the trailing edge

Toggle with system image

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';

export default function ToggleWithImageExample() {
  const [airplaneMode, setAirplaneMode] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Toggle
        isOn={airplaneMode}
        onIsOnChange={setAirplaneMode}
        label="Airplane Mode"
        systemImage="airplane"
      />
    </Host>
  );
}

A row with an airplane icon labeled Airplane Mode and a switch turned off

Toggle styles

Use the toggleStyle modifier to change the toggle's appearance. Available styles are: automatic, switch, and button.

Note: The button style is not available on tvOS.

import { useState } from 'react';
import { Host, Toggle, VStack } from '@expo/ui/swift-ui';
import { toggleStyle } from '@expo/ui/swift-ui/modifiers';

export default function ToggleStylesExample() {
  const [isOn, setIsOn] = useState(true);

  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={8}>
        <Toggle
          isOn={isOn}
          onIsOnChange={setIsOn}
          label="Switch Style"
          modifiers={[toggleStyle('switch')]}
        />
        <Toggle
          isOn={isOn}
          onIsOnChange={setIsOn}
          label="Button Style"
          modifiers={[toggleStyle('button')]}
        />
      </VStack>
    </Host>
  );
}

A Switch Style row with its switch turned on, above a Button Style toggle in its selected filled state

Tinted toggle

Use the tint modifier to change the toggle's color.

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';
import { tint } from '@expo/ui/swift-ui/modifiers';

export default function TintedToggleExample() {
  const [isOn, setIsOn] = useState(true);

  return (
    <Host style={{ flex: 1 }}>
      <Toggle
        isOn={isOn}
        onIsOnChange={setIsOn}
        label="Custom Color"
        modifiers={[tint('#FF9500')]}
      />
    </Host>
  );
}

A row labeled Custom Color with a switch turned on and tinted orange

Custom label content

You can pass custom components as children for more complex toggle labels. Use multiple Text views where the first represents the title and the second represents the subtitle.

import { useState } from 'react';
import { Host, Toggle, Text } from '@expo/ui/swift-ui';

export default function CustomLabelExample() {
  const [vibrateOnRing, setVibrateOnRing] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Toggle isOn={vibrateOnRing} onIsOnChange={setVibrateOnRing}>
        <Text>Vibrate on ring</Text>
        <Text>Enable vibration when the phone rings</Text>
      </Toggle>
    </Host>
  );
}

A toggle row with the title Vibrate on ring above a grey subtitle line

Hidden label

Use the labelsHidden modifier to hide the label while keeping it for accessibility.

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';
import { labelsHidden } from '@expo/ui/swift-ui/modifiers';

export default function HiddenLabelExample() {
  const [isOn, setIsOn] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Toggle
        isOn={isOn}
        onIsOnChange={setIsOn}
        label="Hidden Label"
        modifiers={[labelsHidden()]}
      />
    </Host>
  );
}

A switch on its own, with no visible label text

API

import { Toggle } from '@expo/ui/swift-ui';

Component

`Toggle`

Type: React.Element<ToggleProps>

A control that toggles between on and off states.

ToggleProps

`children`

Optional • Type: ReactNode

Custom content for the toggle label. Use multiple Text views where the first represents the title and the second represents the subtitle.

`isOn`

Optional • Type: boolean

A Boolean value that determines the on/off state of the toggle.

`label`

Optional • Type: string

A string that describes the purpose of the toggle.

`onIsOnChange`

Optional • Type: (isOn: boolean) => void

A callback that is called when the toggle's state changes.

isOn: boolean

The new state of the toggle.

`systemImage`

Optional • Type: SFSymbols7_0

The name of the SF Symbol to display alongside the label.

Inherited props

CommonViewModifierProps

Modifiers

Use these modifiers in the modifiers prop of the SwiftUI and Universal version.

Expo UI lets you put any of the 89 modifiers for any view on Toggle, but not all of them do something here.

69 change what you see on Toggle.
7 have no visible effect on Toggle.
13 work only in one place, such as a widget or a Grid.

Modifier	Why nothing happens
`accessibilityElement`	It joins the child views into one accessibility element, and Toggle takes no child views.
`containerShape`	It sets the shape that the child views use for `containerRelativeShape`, and Toggle takes no child views.
`geometryGroup` iOS 17+	It works on the child views that you give the component, and Toggle takes none.
`imageScale`	It changes only SF Symbols, and Toggle shows none.
`layoutPriority`	It has an effect only when the view shares an axis with other views in a stack.
`onTapGesture`	`Toggle` handles taps itself. Use its `onValueChange` prop.
`zIndex`	It changes the order of views that cover each other in the same parent, and Toggle does not stack its children.

Only in some places

These modifiers work only in a widget, in a Grid, in a Namespace or in a parent that asks for them.

Modifier	Where it works
`activityBackgroundTint`	Works only in a Live Activity. It has no effect in the app.
`alignmentGuide`	Has an effect only when the parent, such as a `VStack` or `ZStack`, aligns its children by the same guide.
`containerBackground`	Works only in a widget, or in a navigation container when you use a `navigation` placement.
`glassEffectId`	Works only on a view that also has `glassEffect`, in a `GlassEffectContainer` and a `Namespace`.
`gridCellAnchor` iOS 16+	Works only on a cell of a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellColumns`	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellUnsizedAxes`	Works only on a view in a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridColumnAlignment` iOS 16+	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`invalidatableContent` iOS 17+	Has an effect only when a parent view uses `redacted` with the `invalidated` reason.
`matchedGeometryEffect`	Works only in a `Namespace`. Give two views the same `id` and change between them with an animation.
`privacySensitive`	Has an effect only when a parent view uses `redacted` with the `privacy` reason.
`unredacted`	Has an effect only in a parent view that uses `redacted`.
`widgetURL`	Works only in a widget. It has no effect in the app.

Sources

The original Expo docs for this page:

Toggle (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/toggle.md)
Toggle (Universal) (source-of-truth/versions/v57.0.0/sdk/ui/universal/switch.md)