Chips

Chips are compact elements that represent an input, attribute, or action.

Page summary

Specifications references

Accessibility

Please follow accessibility criteria for development

Chips support dynamic types for accessibility.

Variants

According to the ODSChip configuration following representations are available.

    enum MyChip: Int {
        case enabled
        case selected
        case disabled
    }

    // Text only
    ODSChip(.enabled, text: "Enable")
    
    // Text with icon
    ODSChip(.enabled, text: "Enable", thumbnail: .icon(iconImage))
            
    // Text with system icon
    ODSChip(.enabled, text: "Enable", thumbnail: .iconSystem(name: "heart"))
            
    // Text with avatar
    ODSChip(.enabled, text: "Enable", thumbnail: .avatar(avatarImage))

A chip can also be disabled, and removable from the list of selection

    // Removable
    ODSChip(.enabled, text: "Enable", removable: true)

    // Disbaled
    ODSChip(.enabled, text: "Enable", disbaled: true)

Choice selection

The selection is managed by the ODSChipPicker providing the right type of selection.

Single selection

The option allows a single chip selection from a set of options. According to the type of selection (optional or not), it is possible to accept at least one or zero selected chip.

Single selection, One chip selected

    enum ChipTest Int{  
        case title1 = 1,
        case title2 = 2
    }

    struct ODSChipPickerSingleSelection: View {
        @State var singleSelection: ChipTest
        let chips = [ODSChip<ChipTest>]

        var body: some View {
            ODSChipPicker(title: "Single selection (at least one element)",
                          selection: $singleSelection,
                          chips: chips)
            )
        }
        
        init() {
            chips = [ODSChip(.title1, text: "Chips 1"), ODSChip(.title2, text: "Chip 2")]
            singleSelection = .title1
        }
    }

Single selection, No chip selected

    struct ODSChipPickerSingleSelection: View {
        @State var singleSelection: ChipTest?

        var body: some View {
            ODSChipPicker(title: "Single selection (No chip seleted allowed)",
                          selection: $singleSelection,
                          chips: chips]
            )
        }
    }

Multiple selection

The option allows a multiple chips selection from a set of options. Depending on allowZeroSelection parameter, it is possible to accept at least one or zero selected chip.

    struct ODSChipPickerMultipleSelection: View {
        @State var multipleSelection: [Int]

        var body: some View {
            ODSChipPicker(title: "Multiple selection",
                          selection: $multipleSelection,
                          allowZeroSelection: true,
                          chips: chips]
            )
        }
    }