---
schema_version: "1"
id: 5bfdc19095a70cbd0dd2b3fc7300233b0b4c776b25fd81e01b782cd6a6a25482
title: Wizard Item 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_wizard_item_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_wizard_item_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: b0510fee1ba5e2896790059a0be7d91c697463767f1fd69bcc9fdb82af8c0d97
description: For the managed package runtime, this page contains the Wizard Item LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# Wizard Item Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains the Wizard Item 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 Spring '20

The _WizardItem Lightning Web Component_ creates the template for each wizard item inside the _Wizard Lightning Web Component_.

## Available c-wizard-item 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="d290596e68">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d290596e74">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d290596e80">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d290596e86">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d290596e92">
              <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="d290596e68 ">
              <p style="margin-bottom:0;">wizardItemId</p>
            </td>

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d290596e92 ">
              <p style="margin-bottom:0;">Sets the Id for the wizardItem component. The Id must be unique.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d290596e92 ">
              <p style="margin-bottom:0;">Sets the label for the wizardItem component. This needs to be unique.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d290596e92 ">
              <p style="margin-bottom:0;">Sets one or more classes, separated by spaces, for the div that wraps around the content.</p>
            </td>

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

## Example of c-wizard-item Component

```
<c-wizard  header="Wizard Component">
    <div  slot="content">
        <c-wizard-item  label="Step1">
            <div slot="wizarditemcontent">...</div>
        </c-wizard-item>
        <c-wizard-item  label="Step2">
            <div slot="wizarditemcontent">...</div>
        </c-wizard-item>
        <c-wizard-item  label="Step3">
            <div slot="wizarditemcontent">...</div>
        </c-wizard-item>
    </div>
</c-wizard>
```