CheckboxGroup
Description
<vaadin-checkbox-group> is a web component that allows the user to choose several items from a group of binary choices.
<vaadin-checkbox-group label="Export data">
<vaadin-checkbox value="0" label="Order ID"></vaadin-checkbox>
<vaadin-checkbox value="1" label="Product name"></vaadin-checkbox>
<vaadin-checkbox value="2" label="Customer"></vaadin-checkbox>
<vaadin-checkbox value="3" label="Status"></vaadin-checkbox>
</vaadin-checkbox-group>Styling
The following shadow DOM parts are available for styling:
| Part name | Description |
|---|---|
label |
The slotted label element wrapper |
group-field |
The checkbox elements wrapper |
helper-text |
The slotted helper text element wrapper |
error-message |
The slotted error message element wrapper |
required-indicator |
The required state indicator element |
The following state attributes are available for styling:
| Attribute | Description |
|---|---|
disabled |
Set when the element is disabled |
readonly |
Set when the element is readonly |
invalid |
Set when the element is invalid |
focused |
Set when the element is focused |
has-label |
Set when the element has a label |
has-value |
Set when the element has a value |
has-helper |
Set when the element has helper text |
has-error-message |
Set when the element has an error message |
See Styling Components documentation.
Properties
accessibleName
Type: string | null | undefined
String used to label the component to screen reader users.
accessibleNameRef
Type: string | null | undefined
Id of the element used as label of the component to screen reader users.
disabled
Type: boolean
If true, the user cannot interact with this element.
errorMessage
Type: string | null | undefined
Error to show when the field is invalid.
helperText
Type: string | null | undefined
String used for the helper text.
invalid
Type: boolean
Set to true when the field is invalid.
label
Type: string | null | undefined
The label text for the input node. When no light dom defined via [slot=label], this value will be used.
manualValidation
Type: boolean
Set to true to enable manual validation mode. This mode disables automatic
constraint validation, allowing you to control the validation process yourself.
You can still trigger constraint validation manually with the validate() method
or use checkValidity() to assess the component's validity without affecting
the invalid state. In manual validation mode, you can also manipulate
the invalid property directly through your application logic without conflicts
with the component's internal validation.
readonly
Type: boolean
When true, the user cannot modify the value of the checkbox group.
The difference between disabled and readonly is that in the
read-only checkbox group, all the checkboxes are also read-only,
and therefore remain focusable and announced by screen readers.
required
Type: boolean
Specifies that the user must fill in a value.
value
Type: string[]
An array containing values of the currently checked checkboxes.
The array is immutable so toggling checkboxes always results in creating a new array.
Methods
checkValidity
Type: () => boolean
Override method inherited from ValidateMixin
to validate the value array.
validate
Type: () => boolean
Validates the field and sets the invalid property based on the result.
The method fires a validated event with the result of the validation.
Events
invalid-changed
Type: CheckboxGroupInvalidChangedEvent
Fired when the invalid property changes.
validated
Type: CheckboxGroupValidatedEvent
Fired whenever the field is validated.
value-changed
Type: CheckboxGroupValueChangedEvent
Fired when the value property changes.
Types
CheckboxGroupInvalidChangedEvent
/**
* Fired when the `invalid` property changes.
*/
export type CheckboxGroupInvalidChangedEvent = CustomEvent<{ value: boolean }>;CheckboxGroupValidatedEvent
/**
* Fired whenever the field is validated.
*/
export type CheckboxGroupValidatedEvent = CustomEvent<{ valid: boolean }>;CheckboxGroupValueChangedEvent
/**
* Fired when the `value` property changes.
*/
export type CheckboxGroupValueChangedEvent = CustomEvent<{ value: string[] }>;