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

For the managed package runtime, this page contains the Wizard 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 _Wizard Lightning Web Component_ displays a modal that enables navigating between steps in a process and displays a progress bar that shows where the user is in the process. The _Wizard LWC_ supports custom labels.

## Available 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="d57643e68">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d57643e74">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d57643e80">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d57643e86">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d57643e92">
              <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="d57643e68 ">
              <p style="margin-bottom:0;">header</p>
            </td>

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d57643e92 ">
              <p style="margin-bottom:0;">This sets the header of the wizard component.</p>
            </td>

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

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

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

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

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

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

## Example of c-wizard component

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

## Available Custom Labels

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d57643e185">
              <p style="margin-bottom:0;">Label</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d57643e191">
              <p style="margin-bottom:0;">ApiName</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d57643e197">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Label" class="slds-cell-wrap" style="vertical-align:top;" headers="d57643e185 ">
              <p style="margin-bottom:0;">Close</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d57643e197 ">
              <p style="margin-bottom:0;">Assistive text for the close icon.</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d57643e197 ">
              <p style="margin-bottom:0;">Text for the cancel button.</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d57643e197 ">
              <p style="margin-bottom:0;">Text for the button that returns user to previous step.</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d57643e197 ">
              <p style="margin-bottom:0;">Text visible on mouse over of a step icon on the progress bar in the wizard.</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d57643e197 ">
              <p style="margin-bottom:0;">Text for the button that navigates to the next step in the wizard.</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d57643e197 ">
              <p style="margin-bottom:0;">Text for the button that saves the process executed in the wizard.</p>
            </td>

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