--- schema_version: "1" id: fa94be41a9f943ea65d8c18ba59fd68e3d1d407616a31cbe6cdb4be15cff9574 title: CheckboxGroup 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_checkboxgroup_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_checkboxgroup_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 422bd42451f9ccac26a8ee244544ec9b54d6c4668814205cfc14b493c6dbe9cf description: For the managed package runtime, this page contains a CheckboxGroup LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # CheckboxGroup Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains a CheckboxGroup 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 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 ``` ``` ## 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. ``` Additional markup is inserted here ``` ## 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 ``` ``` ## 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.