# 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 BF 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](https://docs.klai.studio/form-settings/misc-page-settings#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"
}
```

###