> For the complete documentation index, see [llms.txt](https://anacleto.gitbook.io/anacleto/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://anacleto.gitbook.io/anacleto/anacleto-frontend/ui-builder/components/form.md).

# Form

A container for input controls or button, you can load a form from a store script.

As with windows, the form also supports 2 types of layouts

* **grid**
* **flex**

[See layout docs](/anacleto/anacleto-frontend/ui-builder.md#layout).

## Properties

In addition to the [default properties](/anacleto/anacleto-frontend/ui-builder/components.md#properties) of the components you have the following properties available.

### Loading

* `store` store path of the script used to load data

## Methods

In addition to the [default methods](/anacleto/anacleto-frontend/ui-builder/components.md#methods) of the components you have the following methods available.

### getRecord()

Return the form record value

```javascript
const record = panelsContext.myPanelId.getRecord()
```

### load()

Load the form fields from the `store` script

```javascript
panelsContext.myPanelId.load(args);
```

A store must return a JS object, for example:

```javascript
const uid = req.query.uid;
const tenant = req.headers.tenant;

...your logic

const ret = {
    uid: user.uid,
    displayName: user.displayName,
    email: user.email,
    emailVerified: user.emailVerified,
    disabled:  user.user.disabled ,
    lastSignInTime: user.metadata.lastSignInTime,
    creationTime: user.metadata.creationTime,
    userRoles: userRoles,
    rolesAvailable: rolesAvailable
};

return ret;
```

## Events

In addition to the [default events](/anacleto/anacleto-frontend/ui-builder/components.md#events) of the components you have the following events available.

### onChange