Structure

OUDSCheckbox

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 OUDSCheckbox

Mentioned In

Controls

Indicator states

This checkbox indicator has two 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

If you need to use a tri-state checkbox instead, refer to OUDSCheckboxIndeterminate.

Particular cases

An OUDSCheckbox 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. No accessibility identifier is defined in OUDS side as this value remains in the users hands.

Cases forbidden by design

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

Code samples

    // Supposing we have a selected checkbox
    @Published var isOn: Bool = true

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

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

    // Never disable an error-related checkbox as it will crash
    // This is forbidden by design!
    OUDSCheckbox(isOn: $isOn, 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