Structure

OUDSChipPicker

A picker allowing to expose several filter chips and proposing single or multiple selections.

iOS 15.0+
macOS 13.0+
visionOS 1.0+

@MainActor struct OUDSChipPicker<Tag> where Tag : Hashable

Mentioned In

Controls

Overview

Each chip contains a “tag”, i.e. a supposed to be unique value. The picker will expose choosen values through this “tag”. It has also some configuration elements which will override the one applied to nested OUDSFilterChip.

Accessibility considerations

Voice Over will use several elements to describe the component. 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 OUDSChipPickerData the items inside the picker will have such accessibility identifiers.

Code samples

    // Define the elements to display in filter chip using OUDSChipPickerData.
    enum Drink: String, CaseIterable {
        case virginHolyLava, ipaBeer, mineralWater
    }

    var someDataToPopulate: [OUDSChipPickerData<Drink>] {
        [
            OUDSChipPickerData(tag: Drink.virginHolyLava,
                               layout: .textAndIcon("Virgin Holy Lava", icon: Image(systemName: "flame")),

            OUDSChipPickerData(tag: Dring.ipaBeer,
                               layout: .textAndIcon("IPA Beer", icon: Image(systemName: "dog.fill")),

            OUDSChipPickerData(tag: Drink.mineralWater,
                               layout: .textAndIcon("Mineral water", icon: Image(systemName: "waterbottle.fill")),
        ]
    }

    /// Single selection case

    // Prepare the selection, with a value previously selected
    // Use the data and the binding for the picker.
    @State var selection: Drink = .mineralWater

    // Here the picker with title, selection and data
    OUDSChipPicker(title: "Select a drink", selection: $selection, chips: someDataToPopulate)

    /// Multiple selection case

    // Prepare the selection, with a value previously selected
    // Use the data and the binding for the picker.
    @State var selections: [Drink] = [.mineralWater]

    // Here the picker with title, selection and data
    OUDSChipPicker(title: "Select a drink", selections: $selections, chips: someDataToPopulate)

Design documentation

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

Theme rendering

Orange

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

Orange Compact

A chip picker component in light and dark modes with Orange Compact theme

Sosh

A chip picker component in light and dark modes with Sosh theme

Wireframe

A chip picker component in light and dark modes with Wireframe theme

Since
0.17.0

Topics

Initializers

Instance Properties

var body: some View