For the managed package runtime, this page contains a CheckboxGroup LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Vlocity Insurance and Health Summer '20
The CheckboxGroup Lightning Web Component enables users to select from single or multiple options.
Available c-checkbox-group Attributes
|
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
|
alignment |
vertical, horizontal (Default for 'slds' theme is vertical) (Default for 'nds' theme is horizontal) |
string |
Sets the orientation of the checkbox group. |
|
|
checked-background-color |
Accepts name, RGB, and Hex values. (Default: slds brand blue) |
string |
When type is set to 'icon', sets the checkbox button background color when checkbox is checked. |
|
|
checked-border-color |
Accepts name, RGB,and Hex values. (Default: slds brand blue) |
string |
When type is set to 'icon', sets the checkbox button border color when checkbox is checked. |
|
|
checked-icon-color |
Accepts name, RGB, and Hex values. (Default: slds brand blue) |
string |
When type is set to 'icon', sets the checkbox icon color when checkbox is checked. |
|
|
checked-icon-name |
(Default: utility:add) |
string |
When type is set to 'icon', sets icon to use when checkbox is checked. |
|
|
checked-label-color |
Accepts name, RGB, and Hex values. (Default: slds brand blue) |
string |
When type is set to 'icon', sets the checkbox label color when checkbox is checked. |
|
|
disabled |
If set, the checkbox group is disabled and users cannot interact with it. |
|||
|
extraclass |
Adds a class to the main container element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'. |
|||
|
icon-url |
URL |
string |
Sets the icon URL, overriding the defined url for the svg resource. |
|
|
label |
string |
yes |
Sets visible label for the checkbox group. |
|
|
message-when-value-missing |
string |
To display a message when no checkbox is selected and required is set to true, set this attribute. |
||
|
name |
string |
Specifies the name of the checkbox group. Only only one button can be selected if a name is specified for the group. |
||
|
options |
string |
yes |
Defines the array of label-value pairs for each checkbox. |
|
|
required-label |
string |
Adds a title for the asterisk when required is set to true. |
||
|
required |
If set, a checkbox must be selected before the form can be submitted. |
|||
|
theme |
slds, nds (Default: slds) |
Sets the theme for the component. |
||
|
type |
checkbox, button (Default: checkbox) |
string |
Sets the type of input elements to render. |
|
|
unchecked-background-color |
Accepts name, RGB, and Hex values. (Default: slds brand blue) |
string |
When type is set to 'icon', sets the checkbox button background color when checkbox is not checked. |
|
|
unchecked-border-color |
Accepts name, RGB, and Hex values. (Default: slds brand gray ) |
string |
When type is set to 'icon', sets the checkbox button border color when checkbox is not checked. |
|
|
unchecked-icon-color |
Accepts name, RGB, and Hex values. (Default: white) |
string |
When type is set to 'icon', sets the checkbox icon color when checkbox is not checked. |
|
|
unchecked-icon-name |
(Default: utility:check) |
string |
When type is set to 'icon', sets icon to use when checkbox is not checked. |
|
|
unchecked-label-color |
Accepts name, RGB, and Hex values. (Default: white) |
string |
When type is set to 'icon', sets the checkbox label color when checkbox is not checked. |
|
|
validity |
JSON |
Object |
Sets the validity state for an element, with respect to constraint validation. |
|
|
value |
string |
Sets the default value of checkbox group. |
Example c-checkbox-group Component
<c-checkbox-group
name="vehicle"
value="bike"
options='[{"label":"car","value":"car"},{"label":"bike","value":"bike"},{"label":"ship","value":"ship"}]'
></c-checkbox-group>
Label Slot Usage
A named slot (name = label) is available in the event a user would like to dynamically insert markup next to the input's label.
<c-checkbox-group
name="vehicle"
value="bike"
options='[{"label":"car","value":"car"},{"label":"bike","value":"bike"},{"label":"ship","value":"ship"}]'
>
<span slot="label">Additional markup is inserted here</span>
</c-checkbox-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.
Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20
The CheckboxGroup Lightning Web Component enables users to select from single or multiple options.
Available c-checkbox-group Attributes
|
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
|
alignment |
vertical, horizontal (Default for 'slds' theme: vertical) (Default for 'nds' theme: horizontal) |
string |
Sets the orientation of the checkbox group. |
|
|
checked-background-color |
Accepts name, rgb and hex values. (Default: slds brand blue) |
string |
When type is set to 'icon', sets the checkbox button background color when checkbox is checked. |
|
|
checked-border-color |
Accepts name, rgb and hex values. (Default: slds brand blue) |
string |
When type is set to 'icon', sets the checkbox button border color when checkbox is checked. |
|
|
checked-icon-color |
Accepts name, rgb and hex values. (Default: slds brand blue) |
string |
When type is set to 'icon', sets the checkbox icon color when checkbox is checked. |
|
|
checked-icon-name |
(Default: utility:add) |
string |
When type is set to 'icon', sets icon to use when checkbox is checked. |
|
|
disabled |
If set, the checkbox group is disabled and users cannot interact with it. |
|||
|
extraclass |
Adds a class to the main container element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'. |
|||
|
icon-url |
URL |
string |
Sets the icon URL, overriding the defined url for the svg resource. |
|
|
label |
string |
yes |
Sets visible label for the checkbox group. |
|
|
message-when-value-missing |
string |
To display a message when no checkbox is selected and required is set to true, set this attribute. |
||
|
name |
string |
Specifies the name of the checkbox group. Only only one button can be selected if a name is specified for the group. |
||
|
options |
string |
yes |
Defines the array of label-value pairs for each checkbox. |
|
|
required |
If set, a checkbox must be selected before the form can be submitted. |
|||
|
theme |
slds, nds (Default: slds) |
Sets the theme for the component. |
||
|
type |
checkbox, button (Default: checkbox) |
string |
Sets the type of input elements to render. |
|
|
unchecked-background-color |
Accepts name, rgb and hex values. (Default: slds brand blue) |
string |
When type is set to 'icon', sets the checkbox button background color when checkbox is not checked. |
|
|
unchecked-border-color |
Accepts name, rgb and hex values. (Default: slds brand gray ) |
string |
When type is set to 'icon', sets the checkbox button border color when checkbox is not checked. |
|
|
unchecked-icon-color |
Accepts name, rgb and hex values. (Default: white) |
string |
When type is set to 'icon', sets the checkbox icon color when checkbox is not checked. |
|
|
unchecked-icon-name |
(Default: utility:check) |
string |
When type is set to 'icon', sets icon to use when checkbox is not checked. |
|
|
validity |
JSON |
Object |
Sets the validity state for an element, with respect to constraint validation. |
|
|
value |
string |
Sets the default value of checkbox group. |
Example c-checkbox-group Component
<c-checkbox-group
name="vehicle"
value="bike"
options='[{"label":"car","value":"car"},{"label":"bike","value":"bike"},{"label":"ship","value":"ship"}]'
></c-checkbox-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 CheckboxGroup Lightning Web Component enables users to select from single or multiple options.
Available c-checkbox-group Attributes
|
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
|
alignment |
vertical, horizontal (Default for `slds' theme: vertical) (Default for `nds' theme: horizontal) |
string |
Sets the orientation of the checkbox group. |
|
|
checked-background-color |
Accepts name, rgb and hex values. (Default: slds brand blue) |
string |
When type is set to `icon', sets the checkbox button background color when checkbox is checked. |
|
|
checked-border-color |
Accepts name, rgb and hex values. (Default: slds brand blue) |
string |
When type is set to `icon', sets the checkbox button border color when checkbox is checked. |
|
|
checked-icon-color |
Accepts name, rgb and hex values. (Default: slds brand blue) |
string |
When type is set to `icon', sets the checkbox icon color when checkbox is checked. |
|
|
checked-icon-name |
(Default: utility:add) |
string |
When type is set to `icon', sets icon to use when checkbox is checked. |
|
|
disabled |
If set, the checkbox group is disabled and users cannot interact with it. |
|||
|
extraclass |
Adds a class to the main container element. To add multiple classes, use a space to separate each class, such as `classone classtwo'. |
|||
|
icon-url |
URL |
string |
Sets the icon URL, overriding the defined url for the svg resource. |
|
|
label |
string |
yes |
Sets visible label for the checkbox group. |
|
|
message-when-value-missing |
string |
To display a message when no checkbox is selected and required is set to true, set this attribute. |
||
|
name |
string |
Specifies the name of the checkbox group. Only only one button can be selected if a name is specified for the group. |
||
|
options |
string |
yes |
Defines the array of label-value pairs for each checkbox. |
|
|
required |
If set, a checkbox must be selected before the form can be submitted. |
|||
|
theme |
slds, nds (Default: slds) |
Sets the theme for the component. |
||
|
type |
checkbox, button (Default: checkbox) |
string |
Sets the type of input elements to render. |
|
|
unchecked-background-color |
Accepts name, rgb and hex values. (Default: slds brand blue) |
string |
When type is set to `icon', sets the checkbox button background color when checkbox is not checked. |
|
|
unchecked-border-color |
Accepts name, rgb and hex values. (Default: slds brand gray ) |
string |
When type is set to `icon', sets the checkbox button border color when checkbox is not checked. |
|
|
unchecked-icon-color |
Accepts name, rgb and hex values. (Default: white) |
string |
When type is set to `icon', sets the checkbox icon color when checkbox is not checked. |
|
|
unchecked-icon-name |
(Default: utility:check) |
string |
When type is set to `icon', sets icon to use when checkbox is not checked. |
|
|
validity |
JSON |
Object |
Sets the validity state for an element, with respect to constraint validation. |
|
|
value |
string |
Sets the default value of checkbox group. |
Example c-checkbox-group Component
<c-checkbox-group
name="vehicle"
value="bike"
options='[{"label":"car","value":"car"},{"label":"bike","value":"bike"},{"label":"ship","value":"ship"}]'
></c-checkbox-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.