package.web-types.json Maven / Gradle / Ivy
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/radio-group",
"version": "24.6.0",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-radio-button",
"description": "`` is a web component representing a choice in a radio group.\nOnly one radio button in the group can be selected at the same time.\n\n```html\n\n \n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------|----------------\n`radio` | The wrapper element that contains slotted ``.\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-------------|-------------|------------\n`active` | Set when the radio button is pressed down, either with a pointer or the keyboard. | `:host`\n`disabled` | Set when the radio button is disabled. | `:host`\n`focus-ring` | Set when the radio button is focused using the keyboard. | `:host`\n`focused` | Set when the radio button is focused. | `:host`\n`checked` | Set when the radio button is checked. | `:host`\n`has-label` | Set when the radio button has a label. | `: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": "value",
"description": "The value of the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "checked",
"description": "True if the element is checked.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"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": "name",
"description": "The name of the radio button.",
"value": {
"type": [
"string"
]
}
},
{
"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": "value",
"description": "The value of the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "checked",
"description": "True if the element is checked.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"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": "name",
"description": "The name of the radio button.",
"value": {
"type": [
"string"
]
}
}
],
"events": [
{
"name": "value-changed",
"description": "Fired when the `value` property changes."
},
{
"name": "checked-changed",
"description": "Fired when the `checked` property changes."
}
]
}
},
{
"name": "vaadin-radio-group",
"description": "`` is a web component that allows the user to choose one item from a group of choices.\n\n```html\n\n \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 radio button 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": "name",
"description": "The name of the control, which is submitted with the form data.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "value",
"description": "The value of the radio group.",
"value": {
"type": [
"string"
]
}
},
{
"name": "readonly",
"description": "When present, the user cannot modify the value of the radio group.\nThe property works similarly to the `disabled` property.\nWhile the `disabled` property disables all radio buttons inside the group,\nthe `readonly` property disables only unchecked ones.",
"value": {
"type": [
"boolean"
]
}
},
{
"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": "name",
"description": "The name of the control, which is submitted with the form data.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "value",
"description": "The value of the radio group.",
"value": {
"type": [
"string"
]
}
},
{
"name": "readonly",
"description": "When present, the user cannot modify the value of the radio group.\nThe property works similarly to the `disabled` property.\nWhile the `disabled` property disables all radio buttons inside the group,\nthe `readonly` property disables only unchecked ones.",
"value": {
"type": [
"boolean"
]
}
}
],
"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."
}
]
}
}
]
}
}
} © 2015 - 2024 Weber Informatics LLC | Privacy Policy