Intro

Configurators can sometimes require many inputs to expose all available options. When all controls are shown at once in a control panel, this can quickly overwhelm users and make the interface harder to understand and use.

Accordions help manage this complexity by grouping related inputs into collapsible sections. This keeps the control panel focused, reduces cognitive load, and allows users to interact with one set of options at a time - without losing access to advanced settings when they’re needed.

An accordion has two states:

• Collapsed – the group of inputs is hidden
• Expanded – the inputs are visible and interactive

Accordion “Side 1” in its collapsed state

Accordion “Side 1” in its expanded state

How to use the accordion in Grasshopper

1. Create an “Accordion” component

   Place the Accordion component in your definition.

2. Add UI components to the G-inputs

   • Connect UI components (sliders, toggles, dropdowns, etc.) to the G inputs. Remember to use the Input Reference components.
   • To add more inputs, zoom in on the component and click the plus (+) icon.
   • Note: each G-input should have only one wire connected.

3. Connect the output to a control panel container

   The accordion output must be connected to a downstream UI container, for example:

   • Stack Panel
   • Stack Screen
   • Tab Item
   • Another Accordion (to create nested sections)

4. Name the accordion

   Right-click the Accordion component and set a clear, descriptive name. This name is shown in the control panel and should reflect the group of inputs it contains.

The accordion component.

Setting name of the accordion. In this case, it will be “Side 0”.

Demo

The animation below demonstrates a configurator where inputs are grouped into accordions, allowing the control panel to stay compact while still exposing detailed options when needed.