---
schema_version: "1"
id: 723e5573d98564d59158e9a8e148a66535c4cf81f5861179873e00de9e875214
title: Form Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_form_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_form_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 4b796e6bced94b035df6b9b99900cdf6443a23f4d24336fd6940f691fae4c0c6
description: For the managed package runtime, this page contains a Form LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# Form Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Form LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _Form Lightning Web Component_ creates a wrapper around Vlocity form elements to enable form capabilities.

## Available c-form Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d346792e65">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d346792e71">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d346792e77">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d346792e83">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d346792e89">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e65 ">
              <p style="margin-bottom:0;">layout</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e71 ">
              <p style="margin-bottom:0;">stacked, horizontal, compound (Default: stacked)</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e89 ">
              <p style="margin-bottom:0;">Defines the form layout.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e65 ">
              <p style="margin-bottom:0;">model</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e71 ">
              <p style="margin-bottom:0;">(Default: {})</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e77 ">
              <p style="margin-bottom:0;">string, stringify json</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e89 ">
              <p style="margin-bottom:0;">Keeps key-value pairs for all elements with their synced values. All elements inside the <code>c-form</code> component must have a name attribute. If available, populates with values from elements.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e65 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e71 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e89 ">
              <p style="margin-bottom:0;">Specifies which theme to use.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e65 ">
              <p style="margin-bottom:0;">action</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e71 ">&nbsp;</td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e89 ">
              <p style="margin-bottom:0;">Specifies where to send the form data when the form is submitted.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e65 ">
              <p style="margin-bottom:0;">method</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e71 ">
              <p style="margin-bottom:0;">get, post (Default: get)</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d346792e89 ">
              <p style="margin-bottom:0;">Defines method to submit the form.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-form Component

```
    <c-form
        model={model}
        layout="stacked"
    >
        <c-input value="" label="Name" placeholder="Normal Input" name="name"></c-input>
        <c-input value="" label="Password" placeholder="Normal Input" name="password"></c-input>
        <c-typeahead data={data} label="Typeahead" placeholder="Normal Input" name="typeahead"></c-typeahead>
        <c-combobox theme="" value="" multiple options={data} label="Default Multi Selected" placeholder="Normal Input" name="multiselect"></c-combobox>
        <c-checkbox label="Normal Checkbox" name="checkbox"></c-checkbox>
        <c-radio-group extraclass="slds-p-around_small" groupname="slds1" label="Select option" options={data} name="radiogroup"></c-radio-group>
        <c-button theme="" type="submit" name="submit" variant="brand" label="brand" icon="utility:close" icon-position="right"></c-button>
    </c-form>
```

## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The _Form Lightning Web Component_ creates a wrapper around Vlocity form elements to enable form capabilities.

## Available c-form Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d346792e286">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d346792e292">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d346792e298">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d346792e304">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d346792e310">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e286 ">
              <p style="margin-bottom:0;">layout</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e292 ">
              <p style="margin-bottom:0;">stacked, horizontal, compound (Default: stacked)</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e298 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e304 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e310 ">
              <p style="margin-bottom:0;">Defines the form layout.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e286 ">
              <p style="margin-bottom:0;">model</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e292 ">
              <p style="margin-bottom:0;">(Default: {})</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e298 ">
              <p style="margin-bottom:0;">string, stringify json</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e304 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e310 ">
              <p style="margin-bottom:0;">Keeps key-value pairs for all elements with their synced values. All elements inside the`c-form` component must have a name attribute. If available, populates with values from elements.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e286 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e292 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e298 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e304 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e310 ">
              <p style="margin-bottom:0;">Specifies which theme to use.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e286 ">
              <p style="margin-bottom:0;">action</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e292 ">&nbsp;</td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e298 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e304 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e310 ">
              <p style="margin-bottom:0;">Specifies where to send the form data when the form is submitted.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e286 ">
              <p style="margin-bottom:0;">method</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e292 ">
              <p style="margin-bottom:0;">get, post (Default: get)</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e298 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e304 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d346792e310 ">
              <p style="margin-bottom:0;">Defines method to submit the form.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-form Component

```
    <c-form
        model={model}
        layout="stacked"
    >
        <c-input value="" label="Name" placeholder="Normal Input" name="name"></c-input>
        <c-input value="" label="Password" placeholder="Normal Input" name="password"></c-input>
        <c-typeahead data={data} label="Typeahead" placeholder="Normal Input" name="typeahead"></c-typeahead>
        <c-combobox theme="" value="" multiple options={data} label="Default Multi Selected" placeholder="Normal Input" name="multiselect"></c-combobox>
        <c-checkbox label="Normal Checkbox" name="checkbox"></c-checkbox>
        <c-radio-group extraclass="slds-p-around_small" groupname="slds1" label="Select option" options={data} name="radiogroup"></c-radio-group>
        <c-button theme="" type="submit" name="submit" variant="brand" label="brand" icon="utility:close" icon-position="right"></c-button>
    </c-form>
```