Checkbox
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component.
Checkbox
- Root element
-
vaadin-checkbox - Focused
-
vaadin-checkbox[focused] - Keyboard focused
-
vaadin-checkbox[focus-ring] - Disabled
-
vaadin-checkbox[disabled] - Hovered
-
vaadin-checkbox:hover - Pressed
-
vaadin-checkbox[active] - Checked
-
vaadin-checkbox[checked] - Indeterminate
-
vaadin-checkbox[indeterminate] - Checkbox box
-
vaadin-checkbox::part(checkbox) - Checkmark
-
vaadin-checkbox::part(checkbox)::after - Label
-
vaadin-checkbox> label
Checkbox Group
- Root element
-
vaadin-checkbox-group
States
- Focused
-
vaadin-checkbox-group[focused] - Keyboard focused
-
vaadin-checkbox-group[focus-ring] - Disabled
-
vaadin-checkbox-group[disabled] - Hovered
-
vaadin-checkbox-group:hover - One or more checkboxes checked
-
vaadin-checkbox-group[has-value]
Parts
- Checkbox wrapper
-
vaadin-checkbox-group::part(group-field) - Checkboxes
-
vaadin-checkbox-group> vaadin-checkbox
Label
- Checkbox group with label
-
vaadin-checkbox-group[has-label] - Label
-
vaadin-checkbox-group::part(label) - Label text
-
vaadin-checkbox-group> label - Required indicator
-
vaadin-checkbox-group::part(required-indicator)
Helper and Validation Error
- Field with helper
-
vaadin-checkbox-group[has-helper] - Helper
-
vaadin-checkbox-group::part(helper-text) - Helper text
-
vaadin-checkbox-group> [slot="helper"] - Invalid field
-
vaadin-checkbox-group[invalid] - Error message
-
vaadin-checkbox-group::part(error-message) - Error message text
-
vaadin-checkbox-group> [slot="error-message"]