Contents

toggleStyle(_:)

Sets the style for toggles in a view hierarchy.

Declaration

nonisolated func toggleStyle<S>(_ style: S) -> some View where S : ToggleStyle

Parameters

  • style:

    The toggle style to set. Use one of the built-in values, like Switch or Button, or a custom style that you define by creating a type that conforms to the Togglestyle protocol.

Return Value

A view that uses the specified toggle style for itself and its child views.

Discussion

Use this modifier on a Toggle instance to set a style that defines the control’s appearance and behavior. For example, you can choose the switch style:

Toggle("Vibrate on Ring", isOn: $vibrateOnRing)
    .toggleStyle(.switch)

Built-in styles typically have a similar appearance across platforms, tailored to the platform’s overall style:

Platform

Appearance

iOS, iPadOS

[Image]

macOS

[Image]

Styling toggles in a hierarchy

You can set a style for all toggle instances within a view hierarchy by applying the style modifier to a container view. For example, you can apply the button style to an HStack:

HStack {
    Toggle(isOn: $isFlagged) {
        Label("Flag", systemImage: "flag.fill")
    }
    Toggle(isOn: $isMuted) {
        Label("Mute", systemImage: "speaker.slash.fill")
    }
}
.toggleStyle(.button)

The example above has the following appearance when isFlagged is true and isMuted is false:

Platform

Appearance

iOS, iPadOS

[Image]

macOS

[Image]

Automatic styling

If you don’t set a style, SwiftUI assumes a value of automatic, which corresponds to a context-specific default. Specify the automatic style explicitly to override a container’s style and revert to the default:

HStack {
    Toggle(isOn: $isShuffling) {
        Label("Shuffle", systemImage: "shuffle")
    }
    Toggle(isOn: $isRepeating) {
        Label("Repeat", systemImage: "repeat")
    }

    Divider()

    Toggle("Enhance Sound", isOn: $isEnhanced)
        .toggleStyle(.automatic) // Revert to the default style.
}
.toggleStyle(.button) // Use button style for toggles in the stack.
.labelStyle(.iconOnly) // Omit the title from any labels.

The style that SwiftUI uses as the default depends on both the platform and the context. In macOS, the default in most contexts is a checkbox, while in iOS, the default toggle style is a switch:

Platform

Appearance

iOS, iPadOS

[Image]

macOS

[Image]

For more information about how SwiftUI chooses a default toggle style, see the automatic style.

See Also

Getting numeric inputs