Containers

Tabs & accordion

Split a long form into tabs or collapsible panels; errors open the right tab.

Tabs and Accordion

Both take items: one { key, title, children } per tab / panel. All tabs stay in the page, so values are kept when switching, and every tab is validated on Submit — a failed Submit opens the tab that holds the first error.

A button can switch tabs without code: give it data-tabs (the Tabs id), data-key (the tab) and onClick: "selectTab()". From code: api.selectTab(id, key).

Accordion with alwaysOpen: true lets several panels be open at once.

Try it

Loading example…

Events0

Use the example — every action it runs shows up here with its data.

Code

Copy Full page.js into app/your-page/page.js of a Next.js app (withrcube-html, react-bootstrap and Bootstrap's CSS installed) — it runs as is. Or copy only the schema and keep your own page.

[
  {
    "type": "row",
    "id": "row-tabs",
    "children": [
      {
        "type": "column",
        "id": "c-tabs",
        "children": [
          {
            "type": "Tabs",
            "id": "profile-tabs",
            "props": {
              "defaultActiveKey": "personal",
              "onSelect": "tabChanged()"
            },
            "items": [
              {
                "key": "personal",
                "title": "Personal",
                "children": [
                  {
                    "type": "InputField",
                    "id": "name",
                    "props": {
                      "name": "name",
                      "label": "Name",
                      "required": true
                    }
                  }
                ]
              },
              {
                "key": "address",
                "title": "Address",
                "children": [
                  {
                    "type": "InputField",
                    "id": "city",
                    "props": {
                      "name": "city",
                      "label": "City (required — leave it empty and press Submit)",
                      "required": true
                    }
                  }
                ]
              },
              {
                "key": "notes",
                "title": "Notes",
                "children": [
                  {
                    "type": "TextareaField",
                    "id": "notes",
                    "props": {
                      "name": "notes",
                      "label": "Notes",
                      "rows": 2
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-tab-buttons",
    "children": [
      {
        "type": "column",
        "id": "c-tab-buttons",
        "props": {
          "className": "d-flex gap-2 mb-4"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "go-address",
            "props": {
              "text": "Go to Address",
              "variant": "outline-primary",
              "data-tabs": "profile-tabs",
              "data-key": "address",
              "onClick": "selectTab()"
            }
          },
          {
            "type": "ButtonField",
            "id": "go-notes",
            "props": {
              "text": "Go to Notes (from code)",
              "variant": "outline-primary",
              "onClick": "openNotes()"
            }
          },
          {
            "type": "ButtonField",
            "id": "submit",
            "props": {
              "type": "submit",
              "text": "Submit",
              "onClick": "runValidation()"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-accordion",
    "children": [
      {
        "type": "column",
        "id": "c-accordion",
        "children": [
          {
            "type": "Accordion",
            "id": "faq",
            "props": {
              "defaultActiveKey": "shipping",
              "alwaysOpen": true,
              "onSelect": "panelChanged()"
            },
            "items": [
              {
                "key": "shipping",
                "title": "How long does shipping take?",
                "children": [
                  {
                    "type": "P",
                    "id": "a1",
                    "props": {
                      "text": "Orders ship within 2 business days."
                    }
                  }
                ]
              },
              {
                "key": "returns",
                "title": "Can I return an item?",
                "children": [
                  {
                    "type": "P",
                    "id": "a2",
                    "props": {
                      "text": "Yes, within 30 days."
                    }
                  },
                  {
                    "type": "InputField",
                    "id": "order-no",
                    "props": {
                      "name": "orderNo",
                      "label": "Order number (a field inside a panel)"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`Tabs { defaultActiveKey, variant }`	Tabs; `items: [{ key, title, children }]`.
`Accordion { defaultActiveKey, alwaysOpen, flush }`	Collapsible panels; same `items`.
`data-tabs / data-key + selectTab()`	A button that opens a tab (also works for Accordion).
`api.selectTab(id, key)`	Open a tab / panel from code.

Events

Event	When it runs	Your action receives
`onSelect (Tabs)`	Another tab is chosen.	`{ eventKey }` — the tab key.
`onSelect (Accordion)`	A panel opens or closes.	`{ eventKey }` — key(s) of the open panel(s).
`onSubmit`	Valid submit (all tabs checked).	The entries.