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

For the managed package runtime, this page contains a RadioImageGroup 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 _RadioImageGroup Lightning Web Component_ extends the _RadioGroup Lightning Web Component_ adding additional features. The _RadioImageGroup Lightning Web Component_ enables users to choose from a list of options by selecting an image instead of a radio button.

## Available c-radio-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="d311004e71">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d311004e77">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d311004e83">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d311004e89">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d311004e95">
              <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="d311004e71 ">
              <p style="margin-bottom:0;">enabled-caption</p>
            </td>

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d311004e95 ">
              <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="d311004e71 ">
              <p style="margin-bottom:0;">control-width</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d311004e77 ">
              <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="d311004e83 ">
              <p style="margin-bottom:0;">string</p>
            </td>

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

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

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

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d311004e77 ">
              <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="d311004e83 ">
              <p style="margin-bottom:0;">string</p>
            </td>

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

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

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d311004e95 ">
              <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="d311004e71 ">
              <p style="margin-bottom:0;">horizontal-mode</p>
            </td>

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

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

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

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

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d311004e95 ">
              <p style="margin-bottom:0;">To show image, set to true. Only valid when <em>is-image</em> is set to true.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d311004e95 ">
              <p style="margin-bottom:0;">Displays radio buttons as radio input.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d311004e95 ">
              <p style="margin-bottom:0;">Displays radio buttons as tabs.</p>
            </td>

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

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

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

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d311004e89 ">
              <p style="margin-bottom:0;">yes (if is-display-radio and is-display-wide are set to false)</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d311004e95 ">
              <p style="margin-bottom:0;">Displays radio buttons as image.</p>
            </td>

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

## 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 displayed error messages and returns true.

setCustomValidity(message)

Displays a custom error message when the textarea 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 focus on the textarea field.

## Example c-radio-image-group Component

```
<c-radio-image-group
  class="slds-p-top_small"
  name="rad"
  type="radio"
  options='[{"name": "male", "value": "male", imgId: "https://image.shutterstock.com/image-photo/summer-beach-holiday-online-shopping-450w-461355724.jpg", "selected": false},
  {"name": "female", "value": "female", imgId: "https://cdn.pixabay.com/photo/2015/11/06/15/13/internet-1028794__340.jpg", "selected": true}]'
  is-image="true"
></c-radio-image-group>
```

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

The _RadioImageGroup Lightning Web Component_ extends the _RadioGroup Lightning Web Component_ adding additional features. The_RadioImageGroup Lightning Web Component_ enables users to choose from a list of options by selecting an image instead of a radio button.

## Available c-radio-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="d311004e471">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d311004e477">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d311004e483">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d311004e489">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d311004e495">
              <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="d311004e471 ">
              <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="d311004e477 ">
              <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="d311004e483 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e495 ">
              <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="d311004e471 ">
              <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="d311004e477 ">
              <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="d311004e483 ">
              <p style="margin-bottom:0;">string</p>
            </td>

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

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

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e471 ">
              <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="d311004e477 ">
              <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="d311004e483 ">
              <p style="margin-bottom:0;">string</p>
            </td>

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

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

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e471 ">
              <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="d311004e477 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e483 ">
              <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="d311004e489 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e495 ">
              <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="d311004e471 ">
              <p style="margin-bottom:0;">horizontal-mode</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e477 ">
              <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="d311004e483 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e495 ">
              <p style="margin-bottom:0;">To display the radio buttons horizontally, set to true.</p>
            </td>

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

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e477 ">
              <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="d311004e483 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e495 ">
              <p style="margin-bottom:0;">To show image, set to true. Only valid when <em>is-image</em> is set to true.</p>
            </td>

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

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e477 ">
              <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="d311004e483 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e495 ">
              <p style="margin-bottom:0;">Displays radio buttons as radio input.</p>
            </td>

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

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e477 ">
              <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="d311004e483 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e495 ">
              <p style="margin-bottom:0;">Displays radio buttons as tabs.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e471 ">
              <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="d311004e477 ">
              <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="d311004e483 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e489 ">
              <p style="margin-bottom:0;">yes (if is-display-radio and is-display-wide are set to false)</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d311004e495 ">
              <p style="margin-bottom:0;">Displays radio buttons as image.</p>
            </td>

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

## 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 displayed error messages and returns true.

setCustomValidity(message)

Displays a custom error message when the textarea 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 focus on the textarea field.

## Example c-radio-image-group Component

```
<c-radio-image-group
  class="slds-p-top_small"
  name="rad"
  type="radio"
  options='[{"name": "male", "value": "male", imgId: "https://image.shutterstock.com/image-photo/summer-beach-holiday-online-shopping-450w-461355724.jpg", "selected": false},
  {"name": "female", "value": "female", imgId: "https://cdn.pixabay.com/photo/2015/11/06/15/13/internet-1028794__340.jpg", "selected": true}]'
  is-image="true"
></c-radio-image-group>
```