Accordion

component

examples

• Basic accordion

  description

  A basic collapsible accordion with single item open

  import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
  } from '@shopify/shop-minis-react'
  
  export default function MyComponent() {
    return (
      <Accordion type="single" collapsible>
        <AccordionItem value="item-1">
          <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
          <AccordionContent>
            Yes, you can open multiple items at the same time with the multiple
            type.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Is it customizable?</AccordionTrigger>
          <AccordionContent>
            Yes, you can customize the styling and behavior to match your needs.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    )
  }
  

• Multiple items

  description

  An accordion allowing multiple items to be open simultaneously

  import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
  } from '@shopify/shop-minis-react'
  
  export default function MyComponent() {
    return (
      <Accordion type="multiple">
        <AccordionItem value="item-1">
          <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
          <AccordionContent>
            Yes, you can open multiple items at the same time with the multiple
            type.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Is it customizable?</AccordionTrigger>
          <AccordionContent>
            Yes, you can customize the styling and behavior to match your needs.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    )
  }
  

• Non-collapsible

  description

  An accordion that cannot be collapsed once opened

  import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
  } from '@shopify/shop-minis-react'
  
  export default function MyComponent() {
    return (
      <Accordion type="single" collapsible={false}>
        <AccordionItem value="item-1">
          <AccordionTrigger>Can I collapse this?</AccordionTrigger>
          <AccordionContent>
            No. When you set the collapsible prop to false, the accordion is not collapsible.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    )
  }