Accordion

The Accordion organizes related form content into collapsible sections. It can keep one panel open at a time or allow panels to expand independently.

Source@react-form-builder/components-rsuite

Add content

Add Accordion panels to define the collapsible sections. When you drop another component directly into an Accordion, the Form Builder creates a panel automatically and places the component inside it.

All panels remain expanded in the Form Builder so you can edit their contents. The configured expand and collapse behavior applies in the Form Viewer.

Main properties

The following properties are available within the Main tab:

Name	Type	Description
Accordion	boolean	Allows only one panel to remain expanded when enabled
Active key	string	Selects the currently expanded panel by its event key
Default active key	string	Selects the panel that is expanded initially when the active key is not controlled
Bordered	boolean	Displays a border around the Accordion
Panels	node	Contains the Accordion panel components; other components are wrapped in a panel when inserted here

When Accordion is disabled, the React activeKey and defaultActiveKey props also accept an array of event keys so several panels can stay expanded in controlled or initial state. The Form Builder property editors still use a single string key.

See the RsAccordionProps API reference for the full React component API.

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your component as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

• For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.

• Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

• Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

  Name	Type	Description
  Width	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color

Summary

Use the Accordion to divide a long form into collapsible sections. Add an Accordion panel for each section and use unique event keys to control which panel is expanded.

---

For more information:

• Accordion panel
• RSuite Accordion documentation
• RsAccordion API reference