Checkbox Group
<esp-checkbox-group>
Groups multiple esp-checkbox components and manages their collective state. Works with esp-form-item for label and error message integration.
Slots
<esp-checkbox-group> has a slot:
Default
Place esp-checkbox elements in the default slot.
Attributes
<esp-checkbox-group> has the following attributes:
name
name has a default value of "".
The name used when the group participates in a <form>.
required
required has a default value of false.
When true, at least one checkbox must be checked before the form can be submitted.
required-message
required-message has a default value of "".
A custom message to display when the group is required but no
checkbox is checked. Defaults to
"Please select at least one option." when not set.
disabled
disabled has a default value of false.
Disables all child checkboxes in the group.
Methods
<esp-checkbox-group> has the following methods:
focus
Focus the first non-disabled checkbox in the group.
validate
Re-run constraint validation and dispatch validity-changed.
checkValidity
Check whether the current state is valid (delegates to ElementInternals).
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
Events
<esp-checkbox-group> emits the following events:
value-changed
value-changed is of type CustomEvent<string[]>.
Fired when any child checkbox state changes. The detail is an array of the values of all currently checked checkboxes.
CSS Properties
<esp-checkbox-group> has the following CSS properties:
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).