Accordion

Accordion widgets are Layout Fields that allow users to toggle the visibility of content sections. They are ideal for grouping related fields and saving vertical space in complex forms.

Programmatic

accordion.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.layouts.accordion([
    {
      label: 'Personal Information',
      uid: 'personal',
      children: [
        gui.inputs.textInput('name', {
          label: 'Full Name',
        }),
      ],
    },
    {
      label: 'Account Settings',
      uid: 'account',
      children: [
        gui.inputs.textInput('email', {
          label: 'Email Address',
        }),
      ],
    },
  ], {
    defaultOpen: {
      personal: true,
    },
    uid: 'accordion_basic',
  }),
];

JSON

accordion.json

{
  "form": [
    {
      "uid": "accordion_basic",
      "kind": "layout",
      "type": "accordion",
      "props": {
        "sections": [
          { "uid": "personal", "label": "Personal Information" },
          { "uid": "account", "label": "Account Settings" }
        ],
        "defaultOpen": { "personal": true }
      },
      "children": [
        {
          "uid": "personal",
          "kind": "input",
          "type": "textinput",
          "path": "name",
          "label": "Full Name"
        },
        {
          "uid": "account",
          "kind": "input",
          "type": "textinput",
          "path": "email",
          "label": "Email Address"
        }
      ]
    }
  ]
}

Props

Use these props to customize your Accordion widget.

prop	type	description
sections	array	Required. Array of section definitions: { label: string, uid: string }
singleOpen	boolean	If true, only one section can be open at a time. Defaults to false
defaultOpen	object	Object mapping section uids to boolean state (e.g., { "section_1": true })
renderMode	string	Either 'all' (renders hidden sections in DOM) or 'activeOnly' (renders only open sections). Defaults to 'all'

Single Open

Use the singleOpen property to ensure that opening one section automatically closes others.

Programmatic

accordion.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.layouts.accordion([
    {
      label: 'First Section',
      uid: 'sec1',
      children: [
        gui.inputs.textInput('f1', {
          label: 'Field 1',
        }),
      ],
    },
    {
      label: 'Second Section',
      uid: 'sec2',
      children: [
        gui.inputs.textInput('f2', {
          label: 'Field 2',
        }),
      ],
    },
  ], {
    singleOpen: true,
    uid: 'accordion_single',
  }),
];

JSON

accordion.json

{
  "form": [
    {
      "uid": "accordion_single",
      "kind": "layout",
      "type": "accordion",
      "props": {
        "sections": [
          { "uid": "sec1", "label": "First Section" },
          { "uid": "sec2", "label": "Second Section" }
        ],
        "singleOpen": true
      },
      "children": [
        {
          "uid": "sec1",
          "kind": "input",
          "type": "textinput",
          "path": "f1",
          "label": "Field 1"
        },
        {
          "uid": "sec2",
          "kind": "input",
          "type": "textinput",
          "path": "f2",
          "label": "Field 2"
        }
      ]
    }
  ]
}

Styling

Accordions can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables used to style the accordion.

CSS Variable	Description
--gui-bg-default	Background color for sections and buttons
--gui-border-default	Border color for sections and buttons
--gui-text-default	Text color for labels
--gui-space-3	Padding inside sections and buttons

Anatomy

This is the anatomy of the Accordion Widget in case you want to use your CSS styles.

accordion-anatomy.html

<div class="gui-accordion">
  <div class="gui-widget" id="accordion_uid">

    <div class="gui-accordion__section">
      <button type="button" class="active" id="accordion_button_personal" aria-expanded="true">
        Personal Information
        <span class="gui-accordion__icon"></span>
      </button>

      <section role="region" id="accordion_section_personal" aria-labelledby="accordion_button_personal">
        <!-- Content for Personal Information -->
        <div class="gui-widget">
           <!-- Child widgets render here -->
        </div>
      </section>
    </div>

    <div class="gui-accordion__section">
      <button type="button" id="accordion_button_account" aria-expanded="false">
        Account Settings
        <span class="gui-accordion__icon"></span>
      </button>

      <section role="region" id="accordion_section_account" aria-labelledby="accordion_button_account" hidden>
        <!-- Content for Account Settings -->
      </section>
    </div>

  </div>
</div>