Structure

OUDSSwitchItem

Switch item is a UI element that allows to toggle between two states, typically “On” and “Off”, and used to enable or disable features, options or settings. Switch Item covers a wider range of contexts by allowing to toggle the visibility of additional text labels and icon assets.

iOS 15.0+
macOS 13.0+
tvOS 16.0+
visionOS 1.0+
watchOS 11.0+

@MainActor struct OUDSSwitchItem

Mentioned In

Controls

Layouts

The component can be rendered as two different layouts:

default: the component has a leading indicator, a label and optional texts, and an optional trailing decorative icon
inverse: like the default layout but with a trailing switch indicator and a leading optional decorative icon

Indicator states

The switch indicator has two available states set as a boolean property that determines whether the toggle is on or off.

Particular cases

An OUDSSwitchItem can be related to an error situation, for example troubles for a formular. A dedicated look and feel is implemented for that if the isError flag is risen. In that case if the component displayed an icon, this icon will be replaced automatically by an error icon.

In addition, the OUDSSwitchItem can be in read only mode, i.e. the user cannot interact with the component yet but this component must not be considered as disabled. The switch can be also outlined in some cases.

Accessibility considerations

Voice Over will use several elements to describe the component: if component disabled / read only, if error context, the label and optional texts and a custom switch trait.

Forbidden by design

The design system does not allow to have both an error situation and a read only component. The design system does not allow to have both an error situation and a disabled component. The design system does not allow to have both a read only and a disabled component.

Code samples

    // Supposing we have an unselected state
    @Published var isOn: Bool = false

    // A leading switch with a label.
    // The default layout will be used here.
    OUDSSwitchItem("Lucy in the Sky with Diamonds", isOn: $isOn)

    // Localizable from bundle can also be used
    OUDSSwitchItem(LocalizedStringKey("notifications_setting"), bundle: Bundle.module, isOn: $isOn)

    // A leading switch with a label, but in read only mode (user cannot interact yet, but not disabled).
    // The default layout will be used here.
    OUDSSwitchItem("Lucy in the Sky with Diamonds", isOn: $isOn, isReadOnly: true)

    // A leading switch with a label, and a description text.
    // The default layout will be used here.
    OUDSSwitchItem("Lucy in the Sky with Diamonds", isOn: $isOn, description: "The Beatles")

    // A leading switch with an additional label.
    // The default layout will be used here.
    OUDSSwitchItem("Lucy in the Sky with Diamonds", isOn: $isOn, description: "The Beatles")

    // A trailing switch with a label, an additional label, a description text and an icon.
    // The inverse layout will be used here.
    OUDSSwitchItem("Lucy in the Sky with Diamonds",
                   isOn: $isOn,
                   description: "The Beatles",
                   isReversed: true,
                   icon: Image(decorative: "ic_heart"))

    // A trailing switch with a label, a description text, an icon, a divider and is about an error.
    // The inverse layout will be used here.
    OUDSSwitchItem("Rescue from this world!",
                   isOn: $isOn,
                   description: "Put your hand in mine",
                   icon: Image(decorative: "ic_heart"),
                   isReversed: true,
                   isError: true,
                   hasDivider: true)

    // If on error, add an error message can help user to understand error context
    OUDSSwitchItem("Rescue from this world!",
                   isOn: $isOn,
                   isError: true,
                   errorText: "Something wrong",
                   hasDivider: true)

    // A leading switch with a label, but disabled.
    // The default layout will be used here.
    OUDSSwitchItem("Rescue from this world!", isOn: $isOn)
        .disabled(true)

    // Never disable a read only or an error-related switch as it will crash
    // This is forbidden by design!
    OUDSSwitchItem("Kaboom!", isOn: $isOn, isError: true).disabled(true) // fatal error
    OUDSSwitchItem("Kaboom!", isOn: $isOn, isReadOnly: true).disabled(true) // fatal error

If you need to flip your icon depending to the layout direction or not (e.g. if RTL mode lose semantics / meanings):

    @Environment(\.layoutDirection) var layoutDirection

    OUDSSwitchItem("Lucy in the Sky with Diamonds", isOn: $isOn, flipLeadingIcon: layoutDirection == .rightToLeft)

Rich text

Rich text can only be used for error messages.

Strong text can be used sparingly to highlight key information within the content. No other text styles should be used. Underlined text must not be applied manually (e.g. in error message), as it is commonly associated with hyperlinks and may mislead users.

Accessibility considerations

Always check the results of rich text mode with high contrast, light and dark modes, and Voice Over vocalization.

Design documentation

unified-design-system.orange.com

Themes rendering

Orange

A switch item component in light and dark modes with Orange theme

Orange Compact

A switch item component in light and dark modes with Orange Compact theme

Sosh

A switch item component in light and dark modes with Sosh theme

Wireframe

A switch item component in light and dark modes with Wireframe theme

Version
1.5.0 (Figma component design version)

Since
0.14.0

Topics

Initializers

Instance Properties

var body: some View