> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/reference/components-overview/grouping-elements/panel.md).

# Panel

{% hint style="info" %}
To see panel in grouping eleelements, check out [this example](https://appstaging.fmbetterforms.com/#/apps/pages/edit?id=945D672C-B27E-2B4C-BEAA-54F5EC6F7435).
{% endhint %}

`panel` allows better organization of fields and data. Panel elements can hold other Klai elements.

|                 Key | Value(s) |    Type   | Description                                                                                      |
| ------------------: | -------- | :-------: | ------------------------------------------------------------------------------------------------ |
|              `type` | panel    |  *string* |                                                                                                  |
|             `model` |          |  *object* | unused                                                                                           |
|             `title` | *text*   |  *string* | Text string that will appear at the top of the panel                                             |
|            `footer` | *text*   |  *string* | Text that appears at the bottom of the footer.                                                   |
|            `schema` | {}       |  *object* | Contains nested form schema                                                                      |
|     `schema.fields` | \[]      |  *array*  | Field elements to appear inside the panel                                                        |
|            `isOpen` |          | *boolean* | The current state of the panels display                                                          |
|       `credentials` | {}       |  *object* | credential object                                                                                |
|            `isForm` |          | *boolean* | Defines the panel as a form. [Learn more](/reference/form-settings/misc-page-settings.md#isform) |
| `panelStyleClasses` |          |  *string* |                                                                                                  |
|  `bodyStyleClasses` |          |  *string* |                                                                                                  |

### Reference

```yaml
// sample panel object
{
  "schema": {
    "fields": [
      {
        "label": "My Input",
        "model": "field1",
        "styleClasses": "col-md-12",
        "fieldOptions": {
          "inputType": "text"
        },
        "type": "input"
      }
    ]
  },
  "slots": [],
  "styleClasses": "col-md-6",
  "type": "panel"
}
```

###