New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/checkbox

Package Overview
Dependencies
Maintainers
12
Versions
418
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/checkbox - npm Package Compare versions

Comparing version 24.4.0-alpha2 to 24.4.0-alpha20

theme/lumo/vaadin-checkbox-styles.d.ts
theme/lumo/vaadin-checkbox.d.ts
theme/lumo/vaadin-lit-checkbox.d.ts
theme/material/vaadin-checkbox-styles.d.ts
theme/material/vaadin-checkbox.d.ts
theme/material/vaadin-lit-checkbox.d.ts

16

package.json
{
"name": "@vaadin/checkbox",
"version": "24.4.0-alpha2",
"version": "24.4.0-alpha20",
"publishConfig": {

@@ -40,8 +40,8 @@ "access": "public"

"@polymer/polymer": "^3.0.0",
"@vaadin/a11y-base": "24.4.0-alpha2",
"@vaadin/component-base": "24.4.0-alpha2",
"@vaadin/field-base": "24.4.0-alpha2",
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha2",
"@vaadin/vaadin-material-styles": "24.4.0-alpha2",
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha2",
"@vaadin/a11y-base": "24.4.0-alpha20",
"@vaadin/component-base": "24.4.0-alpha20",
"@vaadin/field-base": "24.4.0-alpha20",
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha20",
"@vaadin/vaadin-material-styles": "24.4.0-alpha20",
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha20",
"lit": "^3.0.0"

@@ -58,3 +58,3 @@ },

],
"gitHead": "f303ead58d27e15d81a55db0559611fb77c0e421"
"gitHead": "9d2eacc494eb27658ba9298be6656815912637be"
}

1

README.md

@@ -8,3 +8,2 @@ # @vaadin/checkbox

[![npm version](https://badgen.net/npm/v/@vaadin/checkbox)](https://www.npmjs.com/package/@vaadin/checkbox)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)

@@ -11,0 +10,0 @@ ```html

12

src/vaadin-checkbox-mixin.d.ts

@@ -15,4 +15,6 @@ /**

import type { CheckedMixinClass } from '@vaadin/field-base/src/checked-mixin.js';
import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';

@@ -31,2 +33,3 @@ /**

Constructor<DisabledMixinClass> &
Constructor<FieldMixinClass> &
Constructor<FocusMixinClass> &

@@ -36,2 +39,3 @@ Constructor<InputMixinClass> &

Constructor<LabelMixinClass> &
Constructor<ValidateMixinClass> &
T;

@@ -53,2 +57,10 @@

name: string;
/**
* When true, the user cannot modify the value of the checkbox.
* The difference between `disabled` and `readonly` is that the
* read-only checkbox remains focusable, is announced by screen
* readers and its value can be submitted as part of the form.
*/
readonly: boolean;
}

138

src/vaadin-checkbox-mixin.js

@@ -9,4 +9,4 @@ /**

import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
import { InputController } from '@vaadin/field-base/src/input-controller.js';
import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';

@@ -21,6 +21,6 @@

* @mixes DelegateFocusMixin
* @mixes LabelMixin
* @mixes FieldMixin
*/
export const CheckboxMixin = (superclass) =>
class CheckboxMixinClass extends LabelMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
class CheckboxMixinClass extends FieldMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
static get properties() {

@@ -55,2 +55,14 @@ return {

/**
* When true, the user cannot modify the value of the checkbox.
* The difference between `disabled` and `readonly` is that the
* read-only checkbox remains focusable, is announced by screen
* readers and its value can be submitted as part of the form.
*/
readonly: {
type: Boolean,
value: false,
reflectToAttribute: true,
},
/**
* Indicates whether the element can be focused and where it participates in sequential keyboard navigation.

@@ -69,2 +81,6 @@ *

static get observers() {
return ['__readonlyChanged(readonly, inputElement)'];
}
/** @override */

@@ -77,3 +93,3 @@ static get delegateProps() {

static get delegateAttrs() {
return [...super.delegateAttrs, 'name'];
return [...super.delegateAttrs, 'name', 'invalid'];
}

@@ -86,2 +102,4 @@

this._boundOnInputClick = this._onInputClick.bind(this);
// Set the string "on" as the default value for the checkbox following the HTML specification:

@@ -105,7 +123,10 @@ // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on

this.addController(new LabelledInputController(this.inputElement, this._labelController));
this._createMethodObserver('_checkedChanged(checked)');
}
/**
* Override method inherited from `ActiveMixin` to prevent setting
* `active` attribute when clicking a link placed inside the label.
* Override method inherited from `ActiveMixin` to prevent setting `active`
* attribute when readonly, or when clicking a link placed inside the label,
* or when clicking slotted helper or error message element.
*

@@ -118,3 +139,8 @@ * @param {Event} event

_shouldSetActive(event) {
if (event.target.localName === 'a') {
if (
this.readonly ||
event.target.localName === 'a' ||
event.target === this._helperNode ||
event.target === this._errorNode
) {
return false;

@@ -127,2 +153,48 @@ }

/**
* Override method inherited from `InputMixin`.
* @param {!HTMLElement} input
* @protected
* @override
*/
_addInputListeners(input) {
super._addInputListeners(input);
input.addEventListener('click', this._boundOnInputClick);
}
/**
* Override method inherited from `InputMixin`.
* @param {!HTMLElement} input
* @protected
* @override
*/
_removeInputListeners(input) {
super._removeInputListeners(input);
input.removeEventListener('click', this._boundOnInputClick);
}
/** @private */
_onInputClick(event) {
// Prevent native checkbox checked change
if (this.readonly) {
event.preventDefault();
}
}
/** @private */
__readonlyChanged(readonly, inputElement) {
if (!inputElement) {
return;
}
// Use aria-readonly since native checkbox doesn't support readonly
if (readonly) {
inputElement.setAttribute('aria-readonly', 'true');
} else {
inputElement.removeAttribute('aria-readonly');
}
}
/**
* Override method inherited from `CheckedMixin` to reset

@@ -144,2 +216,54 @@ * `indeterminate` state checkbox is toggled by the user.

/**
* @override
* @return {boolean}
*/
checkValidity() {
return !this.required || !!this.checked;
}
/**
* Override method inherited from `FocusMixin` to validate on blur.
* @param {boolean} focused
* @protected
*/
_setFocused(focused) {
super._setFocused(focused);
// Do not validate when focusout is caused by document
// losing focus, which happens on browser tab switch.
if (!focused && document.hasFocus()) {
this.validate();
}
}
/** @private */
_checkedChanged(checked) {
if (checked || this.__oldChecked) {
this.validate();
}
this.__oldChecked = checked;
}
/**
* Override an observer from `FieldMixin`
* to validate when required is removed.
*
* @protected
* @override
*/
_requiredChanged(required) {
super._requiredChanged(required);
if (required === false) {
this.validate();
}
}
/** @private */
_onRequiredIndicatorClick() {
this._labelNode.click();
}
/**
* Fired when the checkbox is checked or unchecked by the user.

@@ -146,0 +270,0 @@ *

12

src/vaadin-checkbox-styles.js

@@ -29,3 +29,3 @@ /**

::slotted(input),
::slotted(label) {
[part='label'] {
grid-row: 1;

@@ -39,2 +39,12 @@ }

[part='helper-text'],
[part='error-message'] {
grid-column: 2;
}
:host(:not([has-helper])) [part='helper-text'],
:host(:not([has-error-message])) [part='error-message'] {
display: none;
}
[part='checkbox'] {

@@ -41,0 +51,0 @@ width: var(--vaadin-checkbox-size, 1em);

56

src/vaadin-checkbox.d.ts

@@ -6,9 +6,5 @@ /**

*/
import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { CheckboxMixin } from './vaadin-checkbox-mixin.js';

@@ -53,17 +49,25 @@ /**

*
* Part name | Description
* ------------|-------------
* `checkbox` | The element representing a stylable custom checkbox.
* Part name | Description
* ---------------------|-------------
* `checkbox` | The element representing a stylable custom checkbox
* `label` | The slotted label element 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
* ----------------|-------------
* `active` | Set when the checkbox is activated with mouse, touch or the keyboard.
* `checked` | Set when the checkbox is checked.
* `disabled` | Set when the checkbox is disabled.
* `focus-ring` | Set when the checkbox is focused using the keyboard.
* `focused` | Set when the checkbox is focused.
* `indeterminate` | Set when the checkbox is in the indeterminate state.
* `has-label` | Set when the checkbox has a label.
* Attribute | Description
* ---------------------|-------------
* `active` | Set when the checkbox is activated with mouse, touch or the keyboard.
* `checked` | Set when the checkbox is checked.
* `disabled` | Set when the checkbox is disabled.
* `readonly` | Set when the checkbox is readonly.
* `focus-ring` | Set when the checkbox is focused using the keyboard.
* `focused` | Set when the checkbox is focused.
* `indeterminate` | Set when the checkbox is in the indeterminate state.
* `invalid` | Set when the checkbox is invalid.
* `has-label` | Set when the checkbox has a label.
* `has-helper` | Set when the checkbox has helper text.
* `has-error-message` | Set when the checkbox has an error message.
*

@@ -76,19 +80,3 @@ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

*/
declare class Checkbox extends LabelMixin(
CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))))),
) {
/**
* True if the checkbox is in the indeterminate state which means
* it is not possible to say whether it is checked or unchecked.
* The state is reset once the user switches the checkbox by hand.
*
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
*/
indeterminate: boolean;
/**
* The name of the checkbox.
*/
name: string;
declare class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(HTMLElement))) {
addEventListener<K extends keyof CheckboxEventMap>(

@@ -95,0 +83,0 @@ type: K,

43

src/vaadin-checkbox.js

@@ -27,17 +27,25 @@ /**

*
* Part name | Description
* ------------|-------------
* `checkbox` | The element representing a stylable custom checkbox.
* Part name | Description
* ---------------------|-------------
* `checkbox` | The element representing a stylable custom checkbox
* `label` | The slotted label element 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
* ----------------|-------------
* `active` | Set when the checkbox is activated with mouse, touch or the keyboard.
* `checked` | Set when the checkbox is checked.
* `disabled` | Set when the checkbox is disabled.
* `focus-ring` | Set when the checkbox is focused using the keyboard.
* `focused` | Set when the checkbox is focused.
* `indeterminate` | Set when the checkbox is in the indeterminate state.
* `has-label` | Set when the checkbox has a label.
* Attribute | Description
* ---------------------|-------------
* `active` | Set when the checkbox is activated with mouse, touch or the keyboard.
* `checked` | Set when the checkbox is checked.
* `disabled` | Set when the checkbox is disabled.
* `readonly` | Set when the checkbox is readonly.
* `focus-ring` | Set when the checkbox is focused using the keyboard.
* `focused` | Set when the checkbox is focused.
* `indeterminate` | Set when the checkbox is in the indeterminate state.
* `invalid` | Set when the checkbox is invalid.
* `has-label` | Set when the checkbox has a label.
* `has-helper` | Set when the checkbox has helper text.
* `has-error-message` | Set when the checkbox has an error message.
*

@@ -66,3 +74,12 @@ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

<slot name="input"></slot>
<slot name="label"></slot>
<div part="label">
<slot name="label"></slot>
<div part="required-indicator" on-click="_onRequiredIndicatorClick"></div>
</div>
<div part="helper-text">
<slot name="helper"></slot>
</div>
<div part="error-message">
<slot name="error-message"></slot>
</div>
</div>

@@ -69,0 +86,0 @@ <slot name="tooltip"></slot>

13

src/vaadin-lit-checkbox.js

@@ -20,3 +20,3 @@ /**

*
* This component is an experiment not intended for publishing to npm.
* This component is an experiment and not yet a part of Vaadin platform.
* There is no ETA regarding specific Vaadin version where it'll land.

@@ -40,3 +40,12 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

<slot name="input"></slot>
<slot name="label"></slot>
<div part="label">
<slot name="label"></slot>
<div part="required-indicator" @click="${this._onRequiredIndicatorClick}"></div>
</div>
<div part="helper-text">
<slot name="helper"></slot>
</div>
<div part="error-message">
<slot name="error-message"></slot>
</div>
</div>

@@ -43,0 +52,0 @@ <slot name="tooltip"></slot>

146

theme/lumo/vaadin-checkbox-styles.js

@@ -29,4 +29,12 @@ import '@vaadin/vaadin-lumo-styles/color.js';

--_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
--_helper-spacing: var(--vaadin-input-field-helper-spacing, 0.2em);
--_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
}
[part='label'] {
display: flex;
position: relative;
max-width: max-content;
}
:host([has-label]) ::slotted(label) {

@@ -39,2 +47,10 @@ padding: var(

:host([dir='rtl'][has-label]) ::slotted(label) {
padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
}
:host([has-label][required]) ::slotted(label) {
padding-inline-end: var(--lumo-space-m);
}
[part='checkbox'] {

@@ -82,2 +98,23 @@ width: var(--_checkbox-size);

:host([readonly]:not([checked]):not([indeterminate])) {
color: var(--lumo-secondary-text-color);
}
:host([readonly]:not([checked]):not([indeterminate])) [part='checkbox'] {
background: transparent;
box-shadow: none;
}
:host([readonly]:not([checked]):not([indeterminate])) [part='checkbox']::after {
content: '';
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: inherit;
top: 0;
left: 0;
opacity: 1;
border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-50pct));
}
/* Indeterminate checkmark */

@@ -102,2 +139,6 @@ :host([indeterminate]) [part='checkbox']::after {

:host([focus-ring][readonly]:not([checked]):not([indeterminate])) [part='checkbox'] {
box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
}
/* Disabled */

@@ -126,5 +167,5 @@ :host([disabled]) {

/* RTL specific styles */
:host([dir='rtl'][has-label]) ::slotted(label) {
padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
:host([readonly][checked]) [part='checkbox'],
:host([readonly][indeterminate]) [part='checkbox'] {
background-color: var(--vaadin-checkbox-readonly-checked-background, var(--lumo-contrast-70pct));
}

@@ -147,3 +188,3 @@

/* Hover */
:host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
:host(:not([checked]):not([indeterminate]):not([disabled]):not([readonly]):not([invalid]):hover) [part='checkbox'] {
background: var(--vaadin-checkbox-background-hover, var(--lumo-contrast-30pct));

@@ -154,3 +195,4 @@ }

@media (pointer: coarse) {
:host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
/* prettier-ignore */
:host(:not([checked]):not([indeterminate]):not([disabled]):not([readonly]):not([invalid]):hover) [part='checkbox'] {
background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));

@@ -175,4 +217,98 @@ }

}
/* Required */
:host([required]) [part='required-indicator'] {
position: absolute;
top: var(--lumo-space-xs);
right: var(--lumo-space-xs);
}
:host([required][dir='rtl']) [part='required-indicator'] {
right: auto;
left: var(--lumo-space-xs);
}
:host([required]) [part='required-indicator']::after {
content: var(--lumo-required-field-indicator, '\\2022');
transition: opacity 0.2s;
color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
width: 1em;
text-align: center;
}
/* Invalid */
:host([invalid]) {
--vaadin-input-field-border-color: var(--lumo-error-color);
}
:host([invalid]) [part='checkbox'] {
background: var(--_invalid-background);
background-image: linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%);
}
:host([invalid]:hover) [part='checkbox'] {
background-image: linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%),
linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%);
}
:host([invalid][focus-ring]) {
--_focus-ring-color: var(--lumo-error-color-50pct);
}
:host([invalid]) [part='required-indicator']::after {
color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
}
/* Error message */
[part='error-message'] {
font-size: var(--vaadin-input-field-error-font-size, var(--lumo-font-size-xs));
line-height: var(--lumo-line-height-xs);
font-weight: var(--vaadin-input-field-error-font-weight, 400);
color: var(--vaadin-input-field-error-color, var(--lumo-error-text-color));
will-change: max-height;
transition: 0.4s max-height;
max-height: 5em;
padding-inline-start: var(--lumo-space-xs);
}
:host([has-error-message]) [part='error-message']::before,
:host([has-error-message]) [part='error-message']::after {
content: '';
display: block;
height: 0.2em;
}
:host(:not([invalid])) [part='error-message'] {
max-height: 0;
overflow: hidden;
}
/* Helper */
:host([has-helper]) [part='helper-text']::before {
content: '';
display: block;
height: var(--_helper-spacing);
}
[part='helper-text'] {
display: block;
color: var(--vaadin-input-field-helper-color, var(--lumo-secondary-text-color));
font-size: var(--vaadin-input-field-helper-font-size, var(--lumo-font-size-xs));
line-height: var(--lumo-line-height-xs);
font-weight: var(--vaadin-input-field-helper-font-weight, 400);
margin-left: calc(var(--lumo-border-radius-m) / 4);
transition: color 0.2s;
padding-inline-start: var(--lumo-space-xs);
}
:host(:hover:not([readonly])) [part='helper-text'] {
color: var(--lumo-body-text-color);
}
:host([disabled]) [part='helper-text'] {
color: var(--lumo-disabled-text-color);
-webkit-text-fill-color: var(--lumo-disabled-text-color);
}
`,
{ moduleId: 'lumo-checkbox' },
);

55

theme/material/vaadin-checkbox-styles.js

@@ -18,2 +18,8 @@ import '@vaadin/vaadin-material-styles/color.js';

[part='label'] {
display: flex;
position: relative;
max-width: max-content;
}
:host([has-label]) ::slotted(label) {

@@ -122,2 +128,8 @@ padding: 3px 12px 3px 6px;

:host([readonly][checked]) [part='checkbox'],
:host([readonly][indeterminate]) [part='checkbox'],
:host([readonly]) [part='checkbox']::before {
background-color: var(--material-secondary-text-color);
}
/* RTL specific styles */

@@ -127,4 +139,47 @@ :host([dir='rtl'][has-label]) ::slotted(label) {

}
/* Required */
:host([required]) [part='required-indicator'] {
position: absolute;
top: 3px;
right: 2px;
}
:host([dir='rtl'][required]) [part='required-indicator'] {
right: auto;
left: 2px;
}
:host([required]) [part='required-indicator']::after {
content: '*';
color: var(--material-secondary-text-color);
}
:host([invalid]) [part='required-indicator']::after {
color: var(--material-error-text-color);
}
[part='error-message'],
[part='helper-text'] {
font-size: 0.75em;
line-height: 1;
padding-left: 6px;
}
[part='error-message'] {
color: var(--material-error-text-color);
}
[part='helper-text'] {
color: var(--material-secondary-text-color);
}
:host([has-error-message]) [part='error-message']::before,
:host([has-helper]) [part='helper-text']::before {
content: '';
display: block;
height: 6px;
}
`,
{ moduleId: 'material-checkbox' },
);

166

web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/checkbox",
"version": "24.4.0-alpha2",
"version": "24.4.0-alpha20",
"description-markup": "markdown",

@@ -11,3 +11,3 @@ "contributions": {

"name": "vaadin-checkbox",
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------|-------------\n`checkbox` | The element representing a stylable custom checkbox.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n----------------|-------------\n`active` | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked` | Set when the checkbox is checked.\n`disabled` | Set when the checkbox is disabled.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused` | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in the indeterminate state.\n`has-label` | Set when the checkbox has a label.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`checkbox` | The element representing a stylable custom checkbox\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`active` | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked` | Set when the checkbox is checked.\n`disabled` | Set when the checkbox is disabled.\n`readonly` | Set when the checkbox is readonly.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused` | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in the indeterminate state.\n`invalid` | Set when the checkbox is invalid.\n`has-label` | Set when the checkbox has a label.\n`has-helper` | Set when the checkbox has helper text.\n`has-error-message` | Set when the checkbox has an error message.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [

@@ -68,2 +68,68 @@ {

{
"name": "invalid",
"description": "Set to true when the field is invalid.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",
"description": "Specifies that the user must fill in a value.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "error-message",
"description": "Error to show when the field is invalid.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "helper-text",
"description": "String used for the helper text.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessible-name",
"description": "String used to label the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessible-name-ref",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "indeterminate",

@@ -87,2 +153,13 @@ "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",

{
"name": "readonly",
"description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "theme",

@@ -155,2 +232,68 @@ "description": "The theme variants to apply to the component.",

{
"name": "invalid",
"description": "Set to true when the field is invalid.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",
"description": "Specifies that the user must fill in a value.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "errorMessage",
"description": "Error to show when the field is invalid.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "helperText",
"description": "String used for the helper text.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessibleName",
"description": "String used to label the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessibleNameRef",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "indeterminate",

@@ -172,2 +315,13 @@ "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",

}
},
{
"name": "readonly",
"description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
}

@@ -177,2 +331,6 @@ ],

{
"name": "validated",
"description": "Fired whenever the field is validated."
},
{
"name": "change",

@@ -190,2 +348,6 @@ "description": "Fired when the checkbox is checked or unchecked by the user."

{
"name": "invalid-changed",
"description": "Fired when the `invalid` property changes."
},
{
"name": "indeterminate-changed",

@@ -192,0 +354,0 @@ "description": "Fired when the `indeterminate` property changes."

67

web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/checkbox",
"version": "24.4.0-alpha2",
"version": "24.4.0-alpha20",
"description-markup": "markdown",

@@ -19,3 +19,3 @@ "framework": "lit",

"name": "vaadin-checkbox",
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------|-------------\n`checkbox` | The element representing a stylable custom checkbox.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n----------------|-------------\n`active` | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked` | Set when the checkbox is checked.\n`disabled` | Set when the checkbox is disabled.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused` | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in the indeterminate state.\n`has-label` | Set when the checkbox has a label.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`checkbox` | The element representing a stylable custom checkbox\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`active` | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked` | Set when the checkbox is checked.\n`disabled` | Set when the checkbox is disabled.\n`readonly` | Set when the checkbox is readonly.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused` | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in the indeterminate state.\n`invalid` | Set when the checkbox is invalid.\n`has-label` | Set when the checkbox has a label.\n`has-helper` | Set when the checkbox has helper text.\n`has-error-message` | Set when the checkbox has an error message.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"extension": true,

@@ -45,2 +45,16 @@ "attributes": [

{
"name": "?invalid",
"description": "Set to true when the field is invalid.",
"value": {
"kind": "expression"
}
},
{
"name": "?required",
"description": "Specifies that the user must fill in a value.",
"value": {
"kind": "expression"
}
},
{
"name": "?indeterminate",

@@ -53,2 +67,9 @@ "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",

{
"name": "?readonly",
"description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
"value": {
"kind": "expression"
}
},
{
"name": ".value",

@@ -68,2 +89,30 @@ "description": "The value of the field.",

{
"name": ".errorMessage",
"description": "Error to show when the field is invalid.",
"value": {
"kind": "expression"
}
},
{
"name": ".helperText",
"description": "String used for the helper text.",
"value": {
"kind": "expression"
}
},
{
"name": ".accessibleName",
"description": "String used to label the component to screen reader users.",
"value": {
"kind": "expression"
}
},
{
"name": ".accessibleNameRef",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"kind": "expression"
}
},
{
"name": ".name",

@@ -76,2 +125,9 @@ "description": "The name of the checkbox.",

{
"name": "@validated",
"description": "Fired whenever the field is validated.",
"value": {
"kind": "expression"
}
},
{
"name": "@change",

@@ -98,2 +154,9 @@ "description": "Fired when the checkbox is checked or unchecked by the user.",

{
"name": "@invalid-changed",
"description": "Fired when the `invalid` property changes.",
"value": {
"kind": "expression"
}
},
{
"name": "@indeterminate-changed",

@@ -100,0 +163,0 @@ "description": "Fired when the `indeterminate` property changes.",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc