OUDSCheckboxIndeterminate

Checkbox is a UI element that allows to select multiple options from a set of mutually non exclusive choices. Checkbox that does not show icon or text, provides greater flexibility when creating other components that require a checkbox to be displayed.

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

@MainActor struct OUDSCheckboxIndeterminate

Mentioned In

Controls

Indicator states

The checkbox indicator has three available states:

selected: the checkbox is filled with a tick, the user has made the action to select the checkbox
unselected: the checkbox is empty, does not contain a tick, the user has made the action to unselect or did not select yet the checkbox
indeterminate: like a prefilled or preticked checkbox, the user did not do anything on it yet

In you are looking for a checkbox with only two possible values, refer to OUDSCheckbox.

Particular cases

An OUDSCheckboxIndeterminate 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.

Accessibility considerations

Note also the component must be instanciated with a string parameter used as accessibility label. It is a good pratice (at least) to define a label for a component without text for accessibility reasons. This label will be vocalized by Voice Over. The vocalization tool will also use, after the label, a description of the component (if disabled, if error context), and a fake trait for checkbox.

Cases forbidden by design

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

Code samples

    // Supposing we have an indeterminate state checkbox
    @Published var selection: OUDSCheckboxIndicatorState = .indeterminate

    // A simple checkbox, no error, not in read only mode
    OUDSCheckboxIndeterminate(selection: $selection, accessibilityLabel: "The cake is a lie")

    // A simple checkbox, but is an error context
    OUDSCheckboxIndeterminate(selection: $selection, accessibilityLabel: "The cake is a lie"), isError: true)

    // Never disable an error-related checkbox as it will crash
    // This is forbidden by design!
    OUDSCheckboxIndeterminate(selection: $selection, accessibilityLabel: "The cake is a lie"), isError: true).disabled(true) // fatal error

Suggestions

According to the documentation, the checkbox by default must be used in unselected state.

Design documentation

unified-design-system.orange.com

Themes rendering

Orange

A checkbox component in light and dark modes with Orange theme

Orange Compact

A checkbox component in light and dark modes with Orange Compact theme

Sosh

A checkbox component in light and dark modes with Sosh theme

Wireframe

A checkbox component in light and dark modes with Wireframe theme

Version
2.4.0 (Figma component design version)

Since
0.12.0

Topics

Initializers

Instance Properties

var body: some View