# Composite form

## Overview

A container composed of a set of different inputs for data update or submission. The composite form supports multiple views.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F0cYLe8SBZEqFNU72lT9n%2FCleanShot%202025-07-23%20at%2013.34.05%402x-min.png?alt=media&#x26;token=2db508fc-199c-4232-9af8-7608288681c9" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="144.65625">Name</th><th width="115.4296875">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>views</code></td><td><code>string[]</code></td><td>Array of available view names</td></tr><tr><td><code>selectedView</code></td><td><code>string</code></td><td>Name of the selected view</td></tr><tr><td><code>value</code></td><td><code>value</code></td><td>Current component value</td></tr><tr><td><code>children</code></td><td><code>children</code></td><td>The children of the component</td></tr><tr><td><code>valid</code></td><td><code>boolean</code></td><td>Indicates if the component is valid</td></tr><tr><td><code>validating</code></td><td><code>boolean</code></td><td>Indicates if the component is validating</td></tr></tbody></table>

{% hint style="info" %}
All nested inputs are included in the component’s `value` property allowing you to build custom forms.
{% endhint %}

### Methods

<table><thead><tr><th>Name</th><th width="171.79296875">Parameters</th><th width="100.76171875">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>selectView</code></td><td><code>name: string</code></td><td><code>void</code></td><td>Select a view by name</td></tr><tr><td><code>setValue</code></td><td><code>data: object</code></td><td><code>void</code></td><td>Set component data</td></tr><tr><td><code>resetValue</code></td><td>–</td><td><code>void</code></td><td>Reset component to the initial value</td></tr><tr><td><code>validate</code></td><td>–</td><td><code>void</code></td><td>Trigger form validation</td></tr><tr><td><code>resetValidation</code></td><td>–</td><td><code>void</code></td><td>Clear validation errors</td></tr><tr><td><code>setSubmitButtonDisabled</code></td><td><code>disabled: boolean</code></td><td><code>void</code></td><td>Disable or enable the submit button</td></tr><tr><td><code>submit</code></td><td>–</td><td><code>void</code></td><td>Trigger submit event</td></tr></tbody></table>

### Triggers

| Name                              | Description                                        |
| --------------------------------- | -------------------------------------------------- |
| **On Init**                       | Triggered when the component is initialized        |
| **On Submit**                     | Triggered when the form is submitted               |
| **On Click**                      | Triggered when the form is clicked                 |
| **On Double Click**               | Triggered when the component is double-clicked     |
| **On Change**                     | Triggered when the form's state changes            |
| **On Custom Button Click**        | Triggered when the custom button is clicked        |
| **On Custom Button Double Click** | Triggered when the custom button is double-clicked |