Accordion — Layout Controls

Minimal Example

{
  "id": "faq-accordion",
  "type": "accordion",
  "order": 1,
  "width": "full",
  "settings": {
    "allowMultiple": false,
    "items": [
      { "id": "item-personal",   "label": "Personal Information",  "sectionId": "sec-personal",   "defaultOpen": true },
      { "id": "item-address",    "label": "Address Details",       "sectionId": "sec-address" },
      { "id": "item-employment", "label": "Employment History",    "sectionId": "sec-employment" }
    ]
  }
}

Settings Reference

Setting	Type	Default	Description
`items`	AccordionItem[]	—	Array of accordion panel definitions
`allowMultiple`	boolean	false	Allow more than one panel open simultaneously
`variant`	`default` \| `flush` \| `bordered`	`default`	Visual style of accordion borders and separators
`iconPosition`	`left` \| `right`	`right`	Position of the expand/collapse chevron
`animateHeight`	boolean	true	Animate height transition on expand/collapse

Accordion Item Schema

interface AccordionItem {
  id: string;           // Unique item identifier
  label: string;        // Panel header text
  sectionId: string;    // Form section to display when expanded
  defaultOpen?: boolean; // Start expanded
  disabled?: boolean;   // Prevent expanding
  icon?: string;        // FontAwesome class in header
  badge?: string;       // Badge text (e.g., "Required")
}

Multi-Expand Mode

Use allowMultiple: true for reference forms where users need to consult multiple sections simultaneously:

{
  "id": "policy-sections",
  "type": "accordion",
  "settings": {
    "allowMultiple": true,
    "items": [
      { "id": "section-a", "label": "Section A: General Conditions",  "sectionId": "sec-a", "defaultOpen": true },
      { "id": "section-b", "label": "Section B: Coverage Details",    "sectionId": "sec-b" },
      { "id": "section-c", "label": "Section C: Exclusions",          "sectionId": "sec-c" },
      { "id": "section-d", "label": "Section D: Claims Procedure",    "sectionId": "sec-d" }
    ]
  }
}

Accordion Variants

Variant	Appearance	Best For
`default`	Card-style panels with outer border and shadow	Standard forms with clear visual separation
`flush`	No outer border or shadow; items separated by divider line only	Compact inline sections, settings pages
`bordered`	Each item has a border; more distinct separation	Data entry forms with clearly separated categories

With Status Badges

{
  "id": "onboarding-accordion",
  "type": "accordion",
  "settings": {
    "allowMultiple": false,
    "items": [
      { "id": "step-1", "label": "Basic Information",  "sectionId": "sec-basic",   "badge": "Required", "defaultOpen": true },
      { "id": "step-2", "label": "Verification",       "sectionId": "sec-verify",  "badge": "Required" },
      { "id": "step-3", "label": "Preferences",        "sectionId": "sec-prefs",   "badge": "Optional" }
    ]
  }
}

Accordion vs Tabs vs Stepper

Use accordion when	Use tabs when	Use stepper when
All section headings should be visible	One section at a time; topic navigation	Sequential steps; each step validates before advancing
Users may skip to any section	Users jump between topics freely	Linear progression with validation gates
Sections vary significantly in length	Sections are similar in size	Steps are short and ordered

← Tabs Next: Card Container →