<template> <lightning-checkbox-group name="checkboxGroup" label="Checkbox Group" options={options} value={value} onchange={handleChange} required > </lightning-checkbox-group> </template> The value attribute contains an array of checkboxes. To select a checkbox, pass in its value to the value attribute.
Full Answer
What is the use of checkbox group in Salesforce Lightning?
lightning-checkbox-group implements the checkbox blueprint in the Salesforce Lightning Design System (SLDS). You can use a combination of the variant and class attributes to customize the checkbox group. Use the variant attribute with one of these values to apply different label positioning.
How do I get the value of a checkbox in Salesforce?
The value attribute contains an array of checkboxes. To select a checkbox, pass in its value to the value attribute. In this example, only option1 is selected. To retrieve the values when a checkbox is selected or deselected, use event.detail.value in the change event handler.
What happens when a checkbox doesn't make a selection?
When a user interacts with the checkbox group and doesn't make a selection, an error message is displayed. You can provide a custom error message using the message-when-value-missing attribute. If the disabled attribute is set, checkbox selections can't be changed.
How do I create custom error messages for checkboxes?
You can provide a custom error message using the message-when-value-missing attribute. If the disabled attribute is set, checkbox selections can't be changed.
What is a lightning checkbox group?
A lightning-checkbox-group component represents a checkbox group that enables selection of single or multiple options.
What is validation in checkboxes?
The validation occurs for the checkbox group, not for an individual checkbox. To override the default message "Complete this field" displayed when a selection on a checkbox group is required and no option is selected, use the message-when-value-missing attribute. This message is displayed when you remove focus from the checkbox group.
What is a checkbox group?
The checkbox group is nested in a fieldset element that contains a legend element. The legend contains the label value. The fieldset element enables grouping of related checkboxes to facilitate tabbing navigation and speech navigation for accessibility purposes. Similarly, the legend element improves accessibility by enabling a caption to be assigned to the fieldset.
How to display custom validity error?
For custom validity error messages, display the message using setCustomValidity () and reportValidity (). setCustomValidity () overrides the error message you provide using the message-when-value-missing attribute. For more information, see the lightning-input documentation.
Can checkbox selections be changed?
If the disabled attribute is set, checkbox selections can't be changed.
Can you use variant and class attributes to customize checkbox group?
You can use a combination of the variant and class attributes to customize the checkbox group.
Input Validation
Component Styling
- lightning-checkbox-group implements the checkboxblueprint in the Salesforce Lightning Design System (SLDS). You can use a combination of the variant and classattributes to customize the checkbox group. Use the variantattribute with one of these values to apply different label positioning. 1. label-hiddenhides the checkbox group label but make it av...
Usage Considerations
- lightning-checkbox-group is useful for grouping a set of checkboxes. If you have a single checkbox, use lightning-input type="checkbox"instead.
Accessibility
- The checkbox group is nested in a fieldset element that contains a legend element. The legend contains the label value. The fieldset element enables grouping of related checkboxes to facilitate tabbing navigation and speech navigation for accessibility purposes. Similarly, the legend element improves accessibility by enabling a caption to be assigned to the fieldset.
Source Code
- lightning-checkbox-group is available in the Base Components Recipes GitHub repository. It's transpiled into the cnamespace so that you can use it in your own projects.