required interface approach dynamically

You can take reference from below code

a!localVariables(
  local!availablePets: {
    { pet: "Dog", id: 1 },
    { pet: "Cat", id: 2 },
    { pet: "Horse", id: 3 },
    { pet: "Fish", id: 4 }
  },
  local!selectedPet,
  local!showSelectedPets,
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!checkboxField(
              label: "Avaialble Pets",
              labelPosition: "ABOVE",
              choiceLabels: local!availablePets.pet,
              choiceValues: local!availablePets.id,
              value: local!selectedPet,
              saveInto: local!selectedPet,
              validations: {},
              choiceStyle: "CARDS"
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "arrow-right",
                  color: "ACCENT",
                  link: a!dynamicLink(
                    saveInto: a!save(local!showSelectedPets, true),
                    showWhen: a!isNotNullOrEmpty(local!selectedPet)
                  ),
                  linkStyle: "STANDALONE"
                )
              },
              marginAbove: "EVEN_MORE"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "remove",
                  color: "NEGATIVE",
                  link: a!dynamicLink(
                    saveInto: {
                      a!save(local!showSelectedPets, false),
                      a!save(local!selectedPet, null)
                    }
                  ),
                  linkStyle: "STANDALONE"
                )
              }
            )
          },
          width: "EXTRA_NARROW"
        ),
        a!columnLayout(
          contents: {
            a!forEach(
              items: local!selectedPet,
              expression: a!sectionLayout(
                label: local!availablePets.pet[fv!index],
                contents: {
                  /*Add content*/
                  
                },
                isCollapsible: true,
                marginAbove: "STANDARD"
              )
            )
          },
          showWhen: or(local!showSelectedPets)
        ),
        a!columnLayout(
          showWhen: not(or(local!showSelectedPets))
        )
      }
    )
  }
)

If you don't want to remove the selected choices in checkbox on cancel then you can comment/remove the save on Line 53.

Thank you very much

Thank you very much