{
  "_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": "FileSelector",
  "description": "A file selector allows users to upload files through drag-and-drop or browsing. Supports a standalone integrated context and a form-element-wrapped context for files or images.",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "File selector container",
    "children": [
      {
        "name": "formElementWrapper",
        "restrict": [
          "div"
        ],
        "description": "Form-element envelope that associates the dropzone with a visible field label and optional error message (used in files/images contexts)",
        "attributes": {
          "static": {
            "role": "group"
          },
          "bound": {
            "aria-labelledby": {
              "prop": "labelId"
            }
          }
        },
        "children": [
          {
            "name": "formElementLabel",
            "restrict": [
              "span"
            ],
            "description": "Visible field label",
            "attributes": {
              "bound": {
                "id": {
                  "prop": "labelId"
                }
              }
            }
          },
          {
            "name": "formElementControl",
            "restrict": [
              "div"
            ],
            "description": "Control container that wraps the dropzone within the form-element"
          },
          {
            "name": "formElementHelp",
            "restrict": [
              "div"
            ],
            "description": "Error or help text rendered when the selector is in an error state",
            "attributes": {
              "bound": {
                "id": {
                  "prop": "errorId"
                }
              }
            }
          }
        ]
      },
      {
        "name": "dropzone",
        "restrict": [
          "div"
        ],
        "description": "Region that a file can be dropped within",
        "attributes": {
          "bound": {
            "aria-hidden": {
              "prop": "dropzoneAriaHidden"
            }
          }
        },
        "children": [
          {
            "name": "input",
            "restrict": [
              "input"
            ],
            "description": "Hidden input element",
            "attributes": {
              "static": {
                "type": "file"
              },
              "bound": {
                "id": {
                  "prop": "inputId"
                },
                "accept": {
                  "prop": "accept"
                },
                "multiple": {
                  "prop": "multiple"
                },
                "disabled": {
                  "prop": "disabled"
                },
                "tabindex": {
                  "prop": "tabindex"
                },
                "aria-describedby": {
                  "prop": "errorId"
                }
              }
            }
          },
          {
            "name": "label",
            "restrict": [
              "label"
            ],
            "description": "Upload label/body containing the trigger or integrated content",
            "slot": {
              "name": "default",
              "required": true
            },
            "children": [
              {
                "name": "button",
                "restrict": [
                  "span",
                  "button"
                ],
                "description": "Faux button",
                "children": [
                  {
                    "name": "buttonIcon",
                    "description": "Trigger button glyph",
                    "component": "PrimitiveIcon"
                  }
                ]
              },
              {
                "name": "bodyIcon",
                "description": "Standalone upload glyph rendered inside the integrated dropzone body",
                "component": "PrimitiveIcon"
              },
              {
                "name": "text",
                "restrict": [
                  "span"
                ],
                "description": "Descriptive call back text"
              }
            ]
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "dragover",
      "type": "boolean",
      "description": "Whether a file is being dragged over the dropzone"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the file selector is disabled"
    },
    {
      "name": "hasDrag",
      "type": "boolean",
      "description": "Whether a drag operation has been initiated"
    },
    {
      "name": "error",
      "type": "boolean",
      "description": "Whether the selector is in an invalid/error state"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "label-association",
        "description": "Label must be associated with file input"
      },
      {
        "id": "error-association",
        "description": "When in error, the input must reference the error message via aria-describedby"
      },
      {
        "id": "group-labelling",
        "description": "The form-element wrapper exposes role=group and references the visible label via aria-labelledby"
      }
    ]
  },
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  }
}