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

For the managed package runtime, this page contains a CheckboxImageGroup 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 _CheckboxImageGroup Lightning Web Component_ extends the _CheckboxGroup Lightning Web Component_ adding additional features. The _CheckboxImageGroup Lightning Web Component_ enables users to select from single or multiple options by clicking images instead of checkboxes.

## Available c-checkbox-image-group 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="d249837e71">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d249837e77">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d249837e83">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d249837e89">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d249837e95">
              <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="d249837e71 ">
              <p style="margin-bottom:0;">checked</p>
            </td>

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e95 ">
              <p style="margin-bottom:0;">Sets the default value of checkbox input. Applies only when <em>is-display-checkbox</em> is true.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e95 ">
              <p style="margin-bottom:0;">To show a caption, set to true.</p>
            </td>

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

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e77 ">
              <p style="margin-bottom:0;">Width in pixels. (Default: auto)</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e95 ">
              <p style="margin-bottom:0;">Sets the width of checkbox image.</p>
            </td>

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

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e77 ">
              <p style="margin-bottom:0;">Height in pixels. (Default: auto)</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e95 ">
              <p style="margin-bottom:0;">Sets the height of checkbox image.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e95 ">
              <p style="margin-bottom:0;">To set the number of checkbox images to display in a row, set this attribute.</p>
            </td>

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

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

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

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e89 ">
              <p style="margin-bottom:0;">yes (if <em>is-image</em> is set to false)</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e95 ">
              <p style="margin-bottom:0;">To display checkbox as a checkbox input, set to true. If set to true, <em>is-image</em> cannot be true.</p>
            </td>

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

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

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

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e89 ">
              <p style="margin-bottom:0;">(if <em>is-display-checkbox</em> is set to false)</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e95 ">
              <p style="margin-bottom:0;">To display checkbox as image, set to true. If set to true, <em>is-display-checkbox</em> cannot be true.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d249837e95 ">
              <p style="margin-bottom:0;">To display images, set to true.</p>
            </td>

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

## Example c-checkbox-image-group Component

```
<c-checkbox-image-group
  class="slds-p-top_small"
  name="check"
  required
  image-count-in-row=6
  type="checkbox"
  label="Don't Accept"
  is-display-checkbox="true"
>
</c-checkbox-image-group>
```

## Available Methods

## checkValidity()

Returns the valid attribute value (boolean) on the ValidityState object.

## reportValidity()

Displays the error messages and returns false if the input is invalid. If the input is valid, _reportValidity()_ clears the error message and returns true.

## setCustomValidity(message)

Sets a custom error message to display when the input value is submitted. Takes the _message_ argument. If _message_ is an empty string, the error message is reset.

showHelpMessageIfInvalid()

Displays error messages on invalid fields. An invalid field fails at least one constraint validation and returns false when checkValidity() is called.

focus()

Sets the focus on the textarea field.

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

The _CheckboxImageGroup Lightning Web Component_ extends the_CheckboxGroup Lightning Web Component_ adding additional features. The_CheckboxImageGroup Lightning Web Component_ enables users to select from single or multiple options by clicking images instead of checkboxes.

## Available c-checkbox-image-group 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="d249837e462">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d249837e468">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d249837e474">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d249837e480">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d249837e486">
              <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="d249837e462 ">
              <p style="margin-bottom:0;">checked</p>
            </td>

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e486 ">
              <p style="margin-bottom:0;">Sets the default value of checkbox input. Applies only when <em>is-display-checkbox</em> is true.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e486 ">
              <p style="margin-bottom:0;">To show a caption, set to true.</p>
            </td>

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

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e468 ">
              <p style="margin-bottom:0;">Width in pixels. (Default: auto)</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e486 ">
              <p style="margin-bottom:0;">Sets the width of checkbox image.</p>
            </td>

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

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e468 ">
              <p style="margin-bottom:0;">Height in pixels. (Default: auto)</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e486 ">
              <p style="margin-bottom:0;">Sets the height of checkbox image.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e486 ">
              <p style="margin-bottom:0;">To set the number of checkbox images to display in a row, set this attribute.</p>
            </td>

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

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

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

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e480 ">
              <p style="margin-bottom:0;">yes (if<em>is-image</em> is set to false)</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e486 ">
              <p style="margin-bottom:0;">To display checkbox as a checkbox input, set to true. If set to true, <em>is-image</em> cannot be true.</p>
            </td>

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

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

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

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e480 ">
              <p style="margin-bottom:0;">(if<em>is-display-checkbox</em> is set to false)</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d249837e486 ">
              <p style="margin-bottom:0;">To display checkbox as image, set to true. If set to true, <em>is-display-checkbox</em> cannot be true.</p>
            </td>

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

## Example c-checkbox-image-group Component

```
<c-checkbox-image-group
  class="slds-p-top_small"
  name="check"
  required
  image-count-in-row=6
  type="checkbox"
  label="Don't Accept"
  is-display-checkbox="true"
>
</c-checkbox-image-group>
```

## Available Methods

## checkValidity()

Returns the valid attribute value (boolean) on the ValidityState object.

## reportValidity()\*\*

Displays the error messages and returns false if the input is invalid. If the input is valid, _reportValidity()_ clears the error message and returns true.

## setCustomValidity(message)\*\*

Sets a custom error message to display when the input value is submitted. Takes the _message_ argument. If _message_ is an empty string, the error message is reset.

showHelpMessageIfInvalid()

Displays error messages on invalid fields. An invalid field fails at least one constraint validation and returns false when checkValidit() is called.

focus()

Sets the focus on the textarea field.