{
  "$schema": "https://json.schemastore.org/web-types",
  "name": "@vaadin/radio-group",
  "version": "25.1.1",
  "description-markup": "markdown",
  "contributions": {
    "html": {
      "elements": [
        {
          "name": "vaadin-radio-button",
          "description": "`<vaadin-radio-button>` 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<vaadin-radio-group label=\"Travel class\">\n  <vaadin-radio-button value=\"economy\" label=\"Economy\"></vaadin-radio-button>\n  <vaadin-radio-button value=\"business\" label=\"Business\"></vaadin-radio-button>\n  <vaadin-radio-button value=\"firstClass\" label=\"First Class\"></vaadin-radio-button>\n</vaadin-radio-group>\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 `<input type=\"radio\">`.\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|--------------------------\n`active`     | Set when the radio button is pressed, either with a pointer or the keyboard.\n`disabled`   | Set when the radio button is disabled.\n`focus-ring` | Set when the radio button is focused using the keyboard.\n`focused`    | Set when the radio button is focused.\n`checked`    | Set when the radio button is checked.\n`has-label`  | Set when the radio button has a label.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:--------------------------------------------|\n| `--vaadin-radio-button-background`         |\n| `--vaadin-radio-button-border-color`       |\n| `--vaadin-radio-button-border-width`       |\n| `--vaadin-radio-button-gap`                |\n| `--vaadin-radio-button-label-color`        |\n| `--vaadin-radio-button-label-font-size`    |\n| `--vaadin-radio-button-label-font-weight`  |\n| `--vaadin-radio-button-label-line-height`  |\n| `--vaadin-radio-button-marker-color`       |\n| `--vaadin-radio-button-marker-size`        |\n| `--vaadin-radio-button-size`               |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
          "attributes": [
            {
              "name": "autofocus",
              "description": "Specify that this control should have input focus when the page loads.",
              "value": {
                "type": [
                  "boolean",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "checked",
              "description": "True if the element is checked.",
              "value": {
                "type": [
                  "boolean",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "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": "name",
              "description": "The name of the radio button.",
              "value": {
                "type": [
                  "string",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "theme",
              "description": "The theme variants to apply to the component.",
              "value": {
                "type": [
                  "string",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "value",
              "description": "The value of the field.",
              "value": {
                "type": [
                  "string",
                  "null",
                  "undefined"
                ]
              }
            }
          ],
          "js": {
            "properties": [
              {
                "name": "autofocus",
                "description": "Specify that this control should have input focus when the page loads.",
                "value": {
                  "type": [
                    "boolean",
                    "null",
                    "undefined"
                  ]
                }
              },
              {
                "name": "checked",
                "description": "True if the element is checked.",
                "value": {
                  "type": [
                    "boolean",
                    "null",
                    "undefined"
                  ]
                }
              },
              {
                "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": "name",
                "description": "The name of the radio button.",
                "value": {
                  "type": [
                    "string",
                    "null",
                    "undefined"
                  ]
                }
              },
              {
                "name": "value",
                "description": "The value of the field.",
                "value": {
                  "type": [
                    "string",
                    "null",
                    "undefined"
                  ]
                }
              }
            ],
            "events": [
              {
                "name": "checked-changed",
                "description": "Fired when the `checked` property changes."
              },
              {
                "name": "value-changed",
                "description": "Fired when the `value` property changes."
              }
            ]
          }
        },
        {
          "name": "vaadin-radio-group",
          "description": "`<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.\n\n```html\n<vaadin-radio-group label=\"Travel class\">\n  <vaadin-radio-button value=\"economy\" label=\"Economy\"></vaadin-radio-button>\n  <vaadin-radio-button value=\"business\" label=\"Business\"></vaadin-radio-button>\n  <vaadin-radio-button value=\"firstClass\" label=\"First Class\"></vaadin-radio-button>\n</vaadin-radio-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 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\n--------------------|---------------------------------\n`disabled`          | Set when the element is disabled\n`readonly`          | Set when the element is readonly\n`invalid`           | Set when the element is invalid\n`focused`           | Set when the element is focused\n`has-label`         | Set when the element has a label\n`has-value`         | Set when the element has a value\n`has-helper`        | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip`       | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-input-field-error-color`               |\n| `--vaadin-input-field-error-font-size`           |\n| `--vaadin-input-field-error-font-weight`         |\n| `--vaadin-input-field-error-line-height`         |\n| `--vaadin-input-field-label-color`               |\n| `--vaadin-input-field-label-font-size`           |\n| `--vaadin-input-field-label-font-weight`         |\n| `--vaadin-input-field-label-line-height`         |\n| `--vaadin-input-field-helper-color`              |\n| `--vaadin-input-field-helper-font-size`          |\n| `--vaadin-input-field-helper-font-weight`        |\n| `--vaadin-input-field-helper-line-height`        |\n| `--vaadin-input-field-required-indicator-color`  |\n| `--vaadin-input-field-required-indicator`        |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
          "attributes": [
            {
              "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": "disabled",
              "description": "If true, the user cannot interact with this element.",
              "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": "invalid",
              "description": "Set to true when the field is invalid.",
              "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": "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": "name",
              "description": "The name of the control, which is submitted with the form data.",
              "value": {
                "type": [
                  "string",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "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",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "required",
              "description": "Specifies that the user must fill in a value.",
              "value": {
                "type": [
                  "boolean",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "theme",
              "description": "The theme variants to apply to the component.",
              "value": {
                "type": [
                  "string",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "value",
              "description": "The value of the radio group.",
              "value": {
                "type": [
                  "string",
                  "null",
                  "undefined"
                ]
              }
            }
          ],
          "js": {
            "properties": [
              {
                "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": "disabled",
                "description": "If true, the user cannot interact with this element.",
                "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": "invalid",
                "description": "Set to true when the field is invalid.",
                "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": "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": "name",
                "description": "The name of the control, which is submitted with the form data.",
                "value": {
                  "type": [
                    "string",
                    "null",
                    "undefined"
                  ]
                }
              },
              {
                "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",
                    "null",
                    "undefined"
                  ]
                }
              },
              {
                "name": "required",
                "description": "Specifies that the user must fill in a value.",
                "value": {
                  "type": [
                    "boolean",
                    "null",
                    "undefined"
                  ]
                }
              },
              {
                "name": "value",
                "description": "The value of the radio group.",
                "value": {
                  "type": [
                    "string",
                    "null",
                    "undefined"
                  ]
                }
              }
            ],
            "events": [
              {
                "name": "invalid-changed",
                "description": "Fired when the `invalid` property changes."
              },
              {
                "name": "validated",
                "description": "Fired whenever the field is validated."
              },
              {
                "name": "value-changed",
                "description": "Fired when the `value` property changes."
              }
            ]
          }
        }
      ]
    }
  }
}