{ "_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": "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 surrounds the file-selector in files/images contexts; carries the field's label association and error styling", "attributes": { "static": { "role": "group", "class": "slds-form-element" }, "bound": { "aria-labelledby": { "prop": "labelId" } } }, "children": [ { "name": "formElementLabel", "restrict": [ "span" ], "description": "Visible field label", "attributes": { "bound": { "id": { "prop": "labelId" } }, "static": { "class": "slds-form-element__label" } } }, { "name": "formElementControl", "restrict": [ "div" ], "description": "Control container that holds the file-selector body", "attributes": { "static": { "class": "slds-form-element__control" } } }, { "name": "formElementHelp", "restrict": [ "div" ], "description": "Inline error/help text rendered below the dropzone in the error state", "attributes": { "bound": { "id": { "prop": "errorId" } }, "static": { "class": "slds-form-element__help" } } } ], "modifiers": [ { "name": "hasError", "attribute": "class", "value": "slds-has-error", "description": "Applied to the form-element wrapper when the selector is in an error state" } ] }, { "name": "dropzone", "restrict": [ "div" ], "description": "Region that a file can be dropped within", "attributes": { "bound": { "aria-hidden": { "prop": "dropzoneAriaHidden" } }, "static": { "class": "slds-file-selector__dropzone" } }, "children": [ { "name": "input", "restrict": [ "input" ], "description": "Hidden input element", "attributes": { "static": { "type": "file", "class": "slds-file-selector__input slds-assistive-text" }, "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": "Upload glyph inside the trigger button (files/images contexts)", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_left" } } } ], "renderWhen": { "prop": "context", "eq": "files" }, "attributes": { "static": { "class": "slds-file-selector__button slds-button slds-button_neutral" } } }, { "name": "bodyIcon", "description": "Large utility icon rendered inside the integrated dropzone body", "component": "PrimitiveIcon", "renderWhen": { "prop": "context", "eq": "integrated" }, "attributes": { "static": { "class": "slds-file-selector__body-icon slds-icon slds-icon-text-default" } } }, { "name": "text", "restrict": [ "span" ], "description": "Descriptive call back text", "attributes": { "static": { "class": "slds-file-selector__text" } }, "modifiers": [ { "name": "mediumShow", "attribute": "class", "value": "slds-medium-show", "description": "Reveals the secondary 'or Drop Files' text on medium-and-up viewports (files/images contexts)" }, { "name": "integratedText", "attribute": "class", "value": "slds-file-selector__text_integrated", "description": "Specific to integrated file selector, descriptive call back text" }, { "name": "headingMedium", "attribute": "class", "value": "slds-text-heading_medium", "description": "Medium heading typography (integrated context)" }, { "name": "alignCenter", "attribute": "class", "value": "slds-text-align_center", "description": "Centers the dropzone label text (integrated context)" } ] } ], "attributes": { "static": { "class": "slds-file-selector__body" } }, "modifiers": [ { "name": "integratedBody", "attribute": "class", "value": "slds-file-selector__body_integrated", "description": "Specific to integrated file selector, container for file selector content, specifically within the dropzone" } ] } ], "modifiers": [ { "name": "integratedDropzone", "attribute": "class", "value": "slds-file-selector__dropzone_integrated", "description": "Specific to integrated file selector, region that a file can be dropped within" } ] } ], "attributes": { "static": { "class": "slds-file-selector" } }, "variants": [ { "name": "context", "description": "Rendering context — drives both the root modifier class and the inner content shape", "options": [ { "value": "files", "class": "slds-file-selector_files", "description": "Modifications based on context. Single Line. Dedicated dropzone when there are multiple dropzones in the form or when the input is positioned among other form inputs." }, { "value": "images", "class": "slds-file-selector_images", "description": "Multi Line / Image. Use as a dedicated dropzone for image files only. May require a cropping control." }, { "value": "integrated", "class": "slds-file-selector_integrated", "description": "Invisible Dropzone (Container). Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page." } ], "default": "files" } ] }, "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" } } } }, "extensions": { "com.salesforce-ux": { "dateAdded": "2017-03-01", "genReady": false, "lbc": "lightning-file-upload" } }, "cssSource": "./fileSelector.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "dragover", "class": "slds-has-drag-over" }, { "state": "hasDrag", "class": "slds-has-drag" }, { "state": "error", "class": "slds-has-error" } ] }