Accordion panel

The Accordion panel is a collapsible content section inside an Accordion. Add form components to its content area and use the header to describe the section.

Source@react-form-builder/components-rsuite

Panel behavior

The Form Builder keeps every panel expanded so its nested components remain editable. In the Form Viewer, the parent Accordion controls which panels are expanded.

The Form Builder assigns contiguous event keys when you add, move, reorder, or remove panels. The keys preserve the selected panel as the order changes.

Main properties

The following properties are available within the Main tab:

Name	Type	Description
Header	string	Sets the text displayed in the panel header
Event key	string	Identifies the panel to its parent Accordion
Body fill	boolean	Makes the content area fill the available panel body
Bordered	boolean	Displays a border around the panel
Shaded	boolean	Displays a shadow around the panel
Content	node	Contains the form components displayed inside the panel

See the RsAccordionPanelProps 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 one Accordion panel for each collapsible section. Let the Form Builder manage event keys when you change the panel order.

---

For more information:

• Accordion
• RSuite Accordion documentation
• RsAccordionPanel API reference