Accordion

Expandable/collapsible content sections for managing large amounts of information in a compact space.

Features

• Single or multiple expanded items
• Smooth expand/collapse animations
• Icon indicators
• Keyboard navigation
• Nested accordions support
• Controlled and uncontrolled modes

Usage

Web (React)

import { Accordion, AccordionItem } from '@cuppa/ui'

function MyComponent() {
  return (
    <Accordion>
      <AccordionItem title="What is Cuppa?">
        <p>Cuppa is a cross-platform UI framework...</p>
      </AccordionItem>
      <AccordionItem title="How do I get started?">
        <p>Install the package and import components...</p>
      </AccordionItem>
      <AccordionItem title="Is it free?">
        <p>Yes, Cuppa is open source and free to use.</p>
      </AccordionItem>
    </Accordion>
  )
}

iOS (SwiftUI)

import CuppaUI

struct MyView: View {
  var body: some View {
    CuppaAccordion {
      CuppaAccordionItem(title: "What is Cuppa?") {
        Text("Cuppa is a cross-platform UI framework...")
      }
      CuppaAccordionItem(title: "How do I get started?") {
        Text("Install the package and import components...")
      }
      CuppaAccordionItem(title: "Is it free?") {
        Text("Yes, Cuppa is open source and free to use.")
      }
    }
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.components.CuppaAccordion

@Composable
fun MyScreen() {
  CuppaAccordion {
    CuppaAccordionItem(title = "What is Cuppa?") {
      Text("Cuppa is a cross-platform UI framework...")
    }
    CuppaAccordionItem(title = "How do I get started?") {
      Text("Install the package and import components...")
    }
    CuppaAccordionItem(title = "Is it free?") {
      Text("Yes, Cuppa is open source and free to use.")
    }
  }
}

Props

Accordion

| Prop | Type | Default | Description | |------|------|---------|-------------| | allowMultiple | boolean | false | Allow multiple items open | | defaultIndex | number/array | - | Initially open items | | onChange | function | - | Callback when items change |

AccordionItem

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string/element | - | Item header content | | disabled | boolean | false | Disable the item | | icon | element | - | Custom icon |

Examples

Allow Multiple Open

<Accordion allowMultiple defaultIndex={[0, 1]}>
  <AccordionItem title="Section 1">Content 1</AccordionItem>
  <AccordionItem title="Section 2">Content 2</AccordionItem>
  <AccordionItem title="Section 3">Content 3</AccordionItem>
</Accordion>

With Icons

<Accordion>
  <AccordionItem
    title="Profile Settings"
    icon={<UserIcon />}
  >
    <Input label="Name" />
    <Input label="Email" type="email" />
  </AccordionItem>
  <AccordionItem
    title="Privacy Settings"
    icon={<LockIcon />}
  >
    <Switch label="Public Profile" />
    <Switch label="Show Email" />
  </AccordionItem>
</Accordion>

Nested Accordion

<Accordion>
  <AccordionItem title="Category 1">
    <Accordion>
      <AccordionItem title="Subcategory 1.1">
        Content...
      </AccordionItem>
      <AccordionItem title="Subcategory 1.2">
        Content...
      </AccordionItem>
    </Accordion>
  </AccordionItem>
</Accordion>

Best Practices

1. Use clear, descriptive titles
2. Don't nest more than 2 levels deep
3. Group related content logically
4. Consider using tabs for top-level navigation
5. Provide visual feedback for interactive state