OUDSCheckboxPicker

A picker allowing to expose several checkboxes and select some of them within the others. Each checkbox contains a “tag”, i.e. a supposed to be unique value. The picker will expose the choosen values using this “tag”. It has also some configuration elements which will override the one applied to nested OUDSCheckboxItem (divider, read only and error mode, layout and outlined)

iOS 15.0+
macOS 13.0+
visionOS 1.0+

@MainActor struct OUDSCheckboxPicker<Tag> where Tag : Hashable

Mentioned In

Controls

Accessibility considerations

Voice Over will use several elements to describe the component: if component disabled / read only, if error context, the label and helper texts and a chekcbox trait. The picker itself does no have any defined accessiiblity value, label or identifier ; it remains in the users hands to define which one will be used. However if defined in the OUDSRadioPickerData the items inside the picker will have such accessibility identifiers. In addition the root item of the picker has for accessiiblity identifier the displayed text.

Forbidden by design

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

Code samples

    // Define the elements to display in checkboxes using OUDSCheckboxPickerData.
    // This object has the same properties as the OUDSCheckboxItem,
    // and some of them are optional with default values set
    var someDataToPopulate: [OUDSCheckboxPickerData<String>] {
        [
        OUDSCheckboxPickerData<String>(tag: "Choice_1",
                                       label: "Virgin Holy Lava",
                                       extraLabel: "Very spicy",
                                       helper: "No alcohol, only tasty flavors",
                                       icon: Image(systemName: "flame")),

        OUDSCheckboxPickerData<String>(tag: "Choice_2",
                                       label: "IPA beer",
                                       helper: "From Brewdog company",
                                       icon: Image(systemName: "dog.fill")),

        OUDSCheckboxPickerData<String>(tag: "Choice_3",
                                       label: "Mineral water",
                                       icon: Image(systemName: "waterbottle.fill")),
        ]
    }

    // Prepare the selection, with a value previously selected
    // Use the data and the binding for the picker.
    @State var selections: [String] = ["Choice_1"] // or empty if nothing selected

    // Here the picker is vertical by default
    OUDSCheckboxPicker(selections: $selections, checkboxes: someDataToPopulate)

    // The picker can be vertical and have a root item with a label and a counter
    OUDSCheckboxPicker(selections: $selections,
                       placement: .verticalRooted(label, .textAndCount))

    // The picker can apply some settings to all its radio buttons.
    // It can be also horizontal with a scroll indicator.
    // Here all the the checkboxes are in read only mode and use reversed layout.
    // Here the picker is horizontal and shows the scroll indicator
    OUDSCheckboxPicker(selections: $selections,
                       checkboxes: someDataToPopulate)
                       isReversed: true,
                       isReadOnly: true,
                       placement: .horizontal(true))

Design documentation

There is no online specification as this component is not an official OUDS one

Themes rendering

Orange

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

Since
0.14.0

Topics

Initializers

init(selections: Binding<[Tag]>, checkboxes: [OUDSCheckboxPickerData<Tag>], placement: OUDSCheckboxPickerPlacement, isReversed: Bool, isError: Bool, isReadOnly: Bool, hasDivider: Bool, itemsSpacing: SpaceSemanticToken?)
Defines the picker view which displays using OUDSCheckboxItem view the OUDSCheckboxPickerData

Instance Properties

var body: some View