diff --git a/dev/checkbox.html b/dev/checkbox.html
index 1a948638d3e..79f3e3ea6fe 100644
--- a/dev/checkbox.html
+++ b/dev/checkbox.html
@@ -1,4 +1,4 @@
-
+
@@ -8,15 +8,81 @@
-
-
-
-
+
+ Plain
+
+
+
+
+
+
+
+
+
+
+
+
+ States
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Orientation
+
+
+
+
+
+
+
+
+ Helper Text
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/checkbox-group/src/vaadin-checkbox-group-styles.js b/packages/checkbox-group/src/vaadin-checkbox-group-styles.js
index d2f8bede567..707f377ca05 100644
--- a/packages/checkbox-group/src/vaadin-checkbox-group-styles.js
+++ b/packages/checkbox-group/src/vaadin-checkbox-group-styles.js
@@ -6,32 +6,17 @@
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
export const checkboxGroupStyles = css`
- :host {
- display: inline-flex;
- }
-
- :host::before {
- content: '\\2003';
- width: 0;
- display: inline-block;
- }
-
- :host([hidden]) {
- display: none !important;
- }
-
.vaadin-group-field-container {
- display: flex;
- flex-direction: column;
width: 100%;
}
[part='group-field'] {
display: flex;
flex-wrap: wrap;
+ gap: var(--vaadin-checkbox-group-gap, 0.5em 1em);
}
- :host(:not([has-label])) [part='label'] {
- display: none;
+ :host([theme~='vertical']) [part='group-field'] {
+ flex-direction: column;
}
`;
diff --git a/packages/checkbox-group/src/vaadin-lit-checkbox-group.js b/packages/checkbox-group/src/vaadin-lit-checkbox-group.js
index 462be6362f8..7a4931cb144 100644
--- a/packages/checkbox-group/src/vaadin-lit-checkbox-group.js
+++ b/packages/checkbox-group/src/vaadin-lit-checkbox-group.js
@@ -8,6 +8,8 @@ import { html, LitElement } from 'lit';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { fieldShared } from '@vaadin/field-base/src/styles/field-shared-styles.js';
+import { inputFieldContainer } from '@vaadin/field-base/src/styles/input-field-container-styles.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { CheckboxGroupMixin } from './vaadin-checkbox-group-mixin.js';
import { checkboxGroupStyles } from './vaadin-checkbox-group-styles.js';
@@ -27,7 +29,7 @@ class CheckboxGroup extends CheckboxGroupMixin(ElementMixin(ThemableMixin(Polyli
}
static get styles() {
- return checkboxGroupStyles;
+ return [fieldShared, inputFieldContainer, checkboxGroupStyles];
}
/** @protected */
diff --git a/packages/checkbox/src/vaadin-checkbox-styles.js b/packages/checkbox/src/vaadin-checkbox-styles.js
index c4068595088..1b0ca49923d 100644
--- a/packages/checkbox/src/vaadin-checkbox-styles.js
+++ b/packages/checkbox/src/vaadin-checkbox-styles.js
@@ -3,25 +3,32 @@
* Copyright (c) 2017 - 2025 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
+import '@vaadin/component-base/src/style-props.js';
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
export const checkboxStyles = css`
:host {
- display: inline-block;
+ align-items: baseline;
+ display: inline-grid;
+ gap: var(--vaadin-checkbox-gap, 0.5em);
+ grid-template-columns: auto 1fr;
+ }
+
+ :host::before {
+ content: none;
}
:host([hidden]) {
- display: none !important;
+ display: none;
}
- :host([disabled]) {
- -webkit-tap-highlight-color: transparent;
+ :host([focus-ring]) [part='checkbox'] {
+ outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+ outline-offset: 1px;
}
.vaadin-checkbox-container {
- display: grid;
- grid-template-columns: auto 1fr;
- align-items: baseline;
+ display: contents;
}
[part='checkbox'],
@@ -46,28 +53,90 @@ export const checkboxStyles = css`
}
[part='checkbox'] {
- width: var(--vaadin-checkbox-size, 1em);
+ background-color: var(--vaadin-checkbox-background, transparent);
+ border: var(--vaadin-checkbox-border-width, 1px) solid
+ var(--vaadin-checkbox-border-color, var(--_vaadin-border-color-strong));
+ border-radius: var(--vaadin-checkbox-border-radius, var(--_vaadin-radius-s));
+ color: var(--vaadin-checkbox-color, transparent);
height: var(--vaadin-checkbox-size, 1em);
- --_input-border-width: var(--vaadin-input-field-border-width, 0);
- --_input-border-color: var(--vaadin-input-field-border-color, transparent);
- box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+ position: relative;
+ width: var(--vaadin-checkbox-size, 1em);
}
[part='checkbox']::before {
- display: block;
+ contain: paint;
content: '\\202F';
+ display: block;
line-height: var(--vaadin-checkbox-size, 1em);
- contain: paint;
}
- /* visually hidden */
+ [part='checkbox']::after {
+ content: '';
+ height: var(--vaadin-checkbox-size, 1em);
+ inset: 0;
+ position: absolute;
+ width: var(--vaadin-checkbox-size, 1em);
+ }
+
+ /* Checked, indeterminate */
+ :host(:is([checked], [indeterminate])) {
+ --vaadin-checkbox-background: var(--_vaadin-color-strong);
+ --vaadin-checkbox-border-color: transparent;
+ --vaadin-checkbox-color: var(--_vaadin-background);
+ }
+
+ :host([checked]) [part='checkbox']::after {
+ background: currentColor;
+ mask-image: var(--_vaadin-icon-checkmark);
+ }
+
+ :host([indeterminate]) [part='checkbox']::after {
+ background: currentColor;
+ mask-image: var(--_vaadin-icon-minus);
+ }
+
+ /* Read-only */
+ :host([readonly]) {
+ --vaadin-checkbox-background: transparent;
+ --vaadin-checkbox-border-color: var(--_vaadin-border-color-strong);
+ --vaadin-checkbox-color: var(--_vaadin-color-strong);
+ }
+
+ :host([readonly]) [part='checkbox'] {
+ border-style: dashed;
+ }
+
+ /* Disabled */
+ :host([disabled]) {
+ --vaadin-checkbox-background: var(
+ --vaadin-input-field-disabled-background,
+ var(--_vaadin-background-container-strong)
+ );
+ --vaadin-checkbox-border-color: transparent;
+ --vaadin-checkbox-color: var(--_vaadin-color-strong);
+ --vaadin-checkbox-label-color: var(--vaadin-input-field-disabled-text-color, var(--_vaadin-color-subtle));
+ }
+
+ /* Visually hidden */
::slotted(input) {
+ align-self: stretch;
+ appearance: none;
cursor: inherit;
+ height: initial;
margin: 0;
- align-self: stretch;
- -webkit-appearance: none;
width: initial;
- height: initial;
+ }
+
+ [part='label'] {
+ --vaadin-input-field-label-color: var(--vaadin-checkbox-label-color, var(--_vaadin-color-strong));
+ --vaadin-input-field-label-font-size: var(--vaadin-checkbox-label-font-size, inherit);
+ --vaadin-input-field-label-font-weight: var(--vaadin-checkbox-label-font-weight, 400);
+ --vaadin-input-field-label-line-height: var(--vaadin-checkbox-label-line-height, inherit);
+ padding: var(--vaadin-checkbox-label-padding, 0);
+ }
+
+ [part='required-indicator'] {
+ display: inline-block;
}
@media (forced-colors: active) {
@@ -82,9 +151,9 @@ export const checkboxStyles = css`
}
:host(:is([checked], [indeterminate])) [part='checkbox']::after {
+ border-radius: inherit;
outline: 1px solid;
outline-offset: -1px;
- border-radius: inherit;
}
:host([focused]) [part='checkbox'],
diff --git a/packages/checkbox/src/vaadin-lit-checkbox.js b/packages/checkbox/src/vaadin-lit-checkbox.js
index ab2dc97bdff..d2517936646 100644
--- a/packages/checkbox/src/vaadin-lit-checkbox.js
+++ b/packages/checkbox/src/vaadin-lit-checkbox.js
@@ -8,6 +8,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { fieldShared } from '@vaadin/field-base/src/styles/field-shared-styles.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { CheckboxMixin } from './vaadin-checkbox-mixin.js';
import { checkboxStyles } from './vaadin-checkbox-styles.js';
@@ -27,7 +28,7 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMi
}
static get styles() {
- return checkboxStyles;
+ return [fieldShared, checkboxStyles];
}
/** @protected */
diff --git a/test/integration/component-tooltip.test.js b/test/integration/component-tooltip.test.js
index b41e0b2ede2..386d8297026 100644
--- a/test/integration/component-tooltip.test.js
+++ b/test/integration/component-tooltip.test.js
@@ -36,7 +36,13 @@ before(() => {
[
{ tagName: Button.is },
{ tagName: Checkbox.is, ariaTargetSelector: 'input' },
- { tagName: CheckboxGroup.is },
+ {
+ tagName: CheckboxGroup.is,
+ children: `
+
+
+ `,
+ },
{
tagName: ComboBox.is,
position: 'top',