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 This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

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

Attribute	Value	Type	Required	Description
enabled-caption	true, false (Default: false)	boolean		To show a caption, set to true.
control-width	Width in pixels (Default: auto)	string		Sets the width of radio button image.
control-height	Height in pixels (Default: auto)	string		Sets the height of radio button image.
image-count-in-row		Integer/String		To set the number of checkbox images to display in a row, set this attribute.
horizontal-mode	true, false (Default: false)	boolean		To display the radio buttons horizontally, set to true.
is-image-display	true, false (Default: false)	boolean		To show image, set to true. Only valid when is-image is set to true.
is-display-radio	true, false (Default: false)	boolean	yes (if is-image and is-display-wide are set to false)	Displays radio buttons as radio input.
is-display-wide	true, false (Default: false)	boolean	yes (if is-image and is-display-radio are set to false)	Displays radio buttons as tabs.
is-image	true, false (Default: false)	boolean	yes (if is-display-radio and is-display-wide are set to false)	Displays radio buttons as image.

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. TheRadioImageGroup Lightning Web Component enables users to choose from a list of options by selecting an image instead of a radio button.