{
  "_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-foundation.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"
      }
    },
    "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"
              }
            }
          }
        ]
      },
      {
        "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"
          },
          {
            "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"
              }
            }
          },
          {
            "name": "helpTooltipBody",
            "restrict": [
              "div"
            ],
            "description": "Body content of the tooltip popover"
          }
        ]
      },
      {
        "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"
              },
              {
                "name": "optionFaux",
                "restrict": [
                  "span"
                ],
                "description": "Creates a custom styled radio button"
              },
              {
                "name": "optionLabelText",
                "restrict": [
                  "span"
                ],
                "description": "Visible label text for the radio option"
              }
            ]
          }
        ]
      },
      {
        "name": "errorMessage",
        "restrict": [
          "div"
        ],
        "description": "Validation error message; referenced by each input via aria-describedby",
        "renderWhen": {
          "prop": "hasError",
          "eq": "true"
        }
      }
    ]
  },
  "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"
      }
    ]
  }
}