Collapsible Section/ Accordion

[EbramTawfik]

I am trying to implement this design:

It's a Persona with a Collapsible section to assign a role.

I tried Nav and GroupedLists as recommended here but this didn't work for me as the children of the Collapsible are not links. Any recommendation about how to implement Collapsible section or Accordion for Fluent UI?

[behowell]

Hi @EbramTawfik, you could use an Accordion, with a Persona in the AccordionHeader, and a RadioGroup in the AccordionPanel.

For example:

<Accordion multiple>
  <AccordionItem value="1">
    <AccordionHeader>
      <Persona ... />
    </AccordionHeader>
    <AccordionPanel>
      <RadioGroup>
        <Radio label="User" />
        <Radio label="Owner" />
      </RadioGroup>
    </AccordionPanel>
  </AccordionItem>
  <!-- add more AccordionItems -->
</Accordion