# Collapsible card

## Overview

A collapsible card is a collapsible container for a set of different components. It supports multiple views that can be activated by switching the *Enable multiple views* option in the card's settings.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FMnw5jEjrKNtiTFSqruCk%2FCleanShot%202025-07-23%20at%2011.06.24%402x-min.png?alt=media&#x26;token=459aa194-1687-451c-b5bd-0327b6cfcb68" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="134.69921875">Name</th><th width="122.76171875">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 card</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>collapsed</code></td><td><code>boolean</code></td><td>Indicates if the card is collapsed</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 width="158.890625">Name</th><th width="138.453125">Parameters</th><th width="101.9140625">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>collapse</code></td><td>–</td><td><code>void</code></td><td>Collapse the card</td></tr><tr><td><code>expand</code></td><td>–</td><td><code>void</code></td><td>Expand the card</td></tr><tr><td><code>toggleCollapsed</code></td><td>–</td><td><code>void</code></td><td>Toggle the card's collapsed state</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="204.3359375">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Collapse Changed</strong></td><td>Triggered when the collapsed state changes</td></tr><tr><td><strong>On Header Click</strong></td><td>Triggered when the component header is clicked</td></tr><tr><td><strong>On Header Double Click</strong></td><td>Triggered when the component header is double-clicked</td></tr><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr><tr><td><strong>On Click</strong></td><td>Triggered when the component is clicked</td></tr><tr><td><strong>On Double Click</strong></td><td>Triggered when the component is double-clicked</td></tr></tbody></table>