@scoped-vaadin/checkbox-group

{ "$schema": "https://json.schemastore.org/web-types", "name": "@scoped-vaadin/checkbox-group", "version": "24.6.2", "description-markup": "markdown", "contributions": { "html": { "elements": [ { "name": "vaadin24-checkbox-group", "description": "`<vaadin24-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.\n\n```html\n<vaadin24-checkbox-group label=\"Export data\">\n <vaadin24-checkbox value=\"0\" label=\"Order ID\"></vaadin24-checkbox>\n <vaadin24-checkbox value=\"1\" label=\"Product name\"></vaadin24-checkbox>\n <vaadin24-checkbox value=\"2\" label=\"Customer\"></vaadin24-checkbox>\n <vaadin24-checkbox value=\"3\" label=\"Status\"></vaadin24-checkbox>\n</vaadin24-checkbox-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The checkbox elements 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 | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", "attributes": [ { "name": "disabled", "description": "If true, the user cannot interact with this element.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "label", "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "invalid", "description": "Set to true when the field is invalid.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "manual-validation", "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.", "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": "readonly", "description": "When true, the user cannot modify the value of the checkbox group.\nThe difference between `disabled` and `readonly` is that in the\nread-only checkbox group, all the checkboxes are also read-only,\nand therefore remain focusable and announced by screen readers.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "theme", "description": "The theme variants to apply to the component.", "value": { "type": [ "string", "null", "undefined" ] } } ], "js": { "properties": [ { "name": "disabled", "description": "If true, the user cannot interact with this element.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "label", "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "invalid", "description": "Set to true when the field is invalid.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "manualValidation", "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.", "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": "value", "description": "An array containing values of the currently checked checkboxes.\n\nThe array is immutable so toggling checkboxes always results in\ncreating a new array.", "value": { "type": [ "Array.<string>" ] } }, { "name": "readonly", "description": "When true, the user cannot modify the value of the checkbox group.\nThe difference between `disabled` and `readonly` is that in the\nread-only checkbox group, all the checkboxes are also read-only,\nand therefore remain focusable and announced by screen readers.", "value": { "type": [ "boolean", "null", "undefined" ] } } ], "events": [ { "name": "validated", "description": "Fired whenever the field is validated." }, { "name": "invalid-changed", "description": "Fired when the `invalid` property changes." }, { "name": "value-changed", "description": "Fired when the `value` property changes." } ] } } ] } } }