{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "RadioGroup",
  "description": "A radio group allows users to select one option from a set of mutually exclusive options.",
  "structure": {
    "name": "root",
    "restrict": [
      "fieldset",
      "div"
    ],
    "description": "Initializes radio button",
    "attributes": {
      "static": {
        "role": "radiogroup",
        "class": "slds-form-element"
      }
    },
    "children": [
      {
        "name": "legend",
        "restrict": [
          "legend",
          "span"
        ],
        "description": "Group label/legend",
        "slot": {
          "name": "legend",
          "required": true
        },
        "children": [
          {
            "name": "requiredIndicator",
            "restrict": [
              "abbr"
            ],
            "description": "Required field indicator rendered inside the legend",
            "renderWhen": {
              "prop": "required",
              "eq": "true"
            },
            "attributes": {
              "static": {
                "title": "required",
                "aria-hidden": "true",
                "class": "slds-required"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-form-element__legend slds-form-element__label"
          }
        }
      },
      {
        "name": "helpIcon",
        "restrict": [
          "div"
        ],
        "description": "Help icon trigger and optional tooltip",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "helpText"
        },
        "children": [
          {
            "name": "helpButton",
            "restrict": [
              "button"
            ],
            "description": "Button that toggles the help tooltip",
            "attributes": {
              "static": {
                "class": "slds-button slds-button_icon"
              }
            },
            "children": [
              {
                "name": "helpButtonIcon",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon",
                    "aria-hidden": "true"
                  }
                },
                "children": [
                  {
                    "name": "helpButtonIconUse"
                  }
                ]
              },
              {
                "name": "helpButtonAssistiveText",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "name": "helpButtonIcon",
            "restrict": [
              "svg"
            ],
            "description": "SVG glyph rendered inside the help button"
          },
          {
            "name": "helpButtonIconUse",
            "restrict": [
              "use"
            ],
            "description": "SVG <use> reference to the sprite glyph"
          },
          {
            "name": "helpButtonAssistiveText",
            "restrict": [
              "span"
            ],
            "description": "Visually hidden accessible name for the help button"
          },
          {
            "name": "helpTooltip",
            "restrict": [
              "div"
            ],
            "description": "Optional popover tooltip wired to the help button via aria-describedby",
            "renderWhen": {
              "prop": "helpTooltip",
              "eq": "true"
            },
            "attributes": {
              "static": {
                "role": "tooltip",
                "class": "slds-popover slds-popover_tooltip slds-nubbin_bottom-left"
              }
            },
            "children": [
              {
                "name": "helpTooltipBody",
                "attributes": {
                  "static": {
                    "class": "slds-popover__body"
                  }
                }
              }
            ]
          },
          {
            "name": "helpTooltipBody",
            "restrict": [
              "div"
            ],
            "description": "Body content of the tooltip popover"
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-form-element__icon"
          }
        }
      },
      {
        "name": "options",
        "restrict": [
          "div"
        ],
        "description": "Container for radio options",
        "slot": {
          "name": "default",
          "restrict": [
            "Radio"
          ]
        },
        "children": [
          {
            "name": "option",
            "restrict": [
              "span"
            ],
            "description": "Initializes radio button",
            "repeats": true,
            "children": [
              {
                "name": "optionInput",
                "restrict": [
                  "input"
                ],
                "description": "The native radio input element",
                "attributes": {
                  "static": {
                    "type": "radio"
                  }
                }
              },
              {
                "name": "optionLabel",
                "restrict": [
                  "label"
                ],
                "description": "Creates a label for radio button",
                "attributes": {
                  "static": {
                    "class": "slds-radio__label"
                  }
                },
                "children": [
                  {
                    "name": "optionFaux",
                    "attributes": {
                      "static": {
                        "class": "slds-radio_faux"
                      }
                    }
                  },
                  {
                    "name": "optionLabelText",
                    "attributes": {
                      "static": {
                        "class": "slds-form-element__label"
                      }
                    }
                  }
                ]
              },
              {
                "name": "optionFaux",
                "restrict": [
                  "span"
                ],
                "description": "Creates a custom styled radio button"
              },
              {
                "name": "optionLabelText",
                "restrict": [
                  "span"
                ],
                "description": "Visible label text for the radio option"
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-radio"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-form-element__control"
          }
        }
      },
      {
        "name": "errorMessage",
        "restrict": [
          "div"
        ],
        "description": "Validation error message; referenced by each input via aria-describedby",
        "renderWhen": {
          "prop": "hasError",
          "eq": "true"
        },
        "attributes": {
          "static": {
            "class": "slds-form-element__help"
          }
        }
      }
    ]
  },
  "states": [
    {
      "name": "required",
      "type": "boolean",
      "aria": "aria-required",
      "description": "Whether a selection is required"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the entire group is disabled"
    },
    {
      "name": "hasError",
      "type": "boolean",
      "description": "Whether the radio group has a validation error"
    },
    {
      "name": "errorMessageId",
      "type": "boolean",
      "aria": "aria-describedby",
      "description": "When set, each input is linked to the error message id via aria-describedby"
    },
    {
      "name": "helpTooltip",
      "type": "boolean",
      "description": "Whether the help icon renders a popover tooltip in addition to the button"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "radiogroup-role",
        "description": "Container should have role='radiogroup'"
      },
      {
        "id": "group-label",
        "description": "Group must have a label via legend or aria-labelledby"
      },
      {
        "id": "arrow-navigation",
        "description": "Arrow keys should navigate between radio options"
      },
      {
        "id": "error-association",
        "description": "When in an error state, each input should reference the error message id via aria-describedby"
      },
      {
        "id": "required-indicator",
        "description": "The visual required indicator (abbr) should be marked aria-hidden so the required state is conveyed via aria-required on the group"
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-radio-group"
    }
  },
  "cssSource": "./radioGroup.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "disabled",
      "class": "slds-is-disabled"
    },
    {
      "state": "hasError",
      "class": "slds-has-error"
    }
  ]
}