Component Blueprints
File Selector
- HTML/CSS:Dev Ready
- Layout:Responsive
Sections
The File selector component allows the user to select file(s) from a user’s file system. Either natively using an file input or drag and drop.
Attachment
About File Selector#
Accessibility#
When implementing this component, pay special attention to the following:
Markup#
aria-labelledbyis placed on the HTMLinputto form an "Accessible Label" from 2 separate visible text labels, by referencing theiridattributes
Base#
Attachment
<div class="slds-form-element">
<span class="slds-form-element__label" id="file-selector-primary-label-13">Attachment</span>
<div class="slds-form-element__control">
<div class="slds-file-selector slds-file-selector_files">States#
Error#
Attachment
File type not supported
<div class="slds-form-element slds-has-error">
<span class="slds-form-element__label" id="file-selector-primary-label-25">Attachment</span>
<div class="slds-form-element__control">
<div class="slds-file-selector slds-file-selector_files">Dragover#
Attachment
<div class="slds-form-element">
<span class="slds-form-element__label" id="file-selector-primary-label-37">Attachment</span>
<div class="slds-form-element__control">
<div class="slds-file-selector slds-file-selector_files">Dragover with error#
Attachment
File type not supported
<div class="slds-form-element slds-has-error">
<span class="slds-form-element__label" id="file-selector-primary-label-49">Attachment</span>
<div class="slds-form-element__control">
<div class="slds-file-selector slds-file-selector_files">Image#
Multi Line / Image
Use as a dedicated dropzone for image files only. May require a cropping control.
Attachment
<div class="slds-form-element">
<span class="slds-form-element__label" id="file-selector-primary-label-61">Attachment</span>
<div class="slds-form-element__control">
<div class="slds-file-selector slds-file-selector_images">States#
Error#
Attachment
File type not supported
<div class="slds-form-element slds-has-error">
<span class="slds-form-element__label" id="file-selector-primary-label-73">Attachment</span>
<div class="slds-form-element__control">
<div class="slds-file-selector slds-file-selector_images">Dragover#
Attachment
<div class="slds-form-element">
<span class="slds-form-element__label" id="file-selector-primary-label-85">Attachment</span>
<div class="slds-form-element__control">
<div class="slds-file-selector slds-file-selector_images">Dragover with error#
Attachment
File type not supported
<div class="slds-form-element slds-has-error">
<span class="slds-form-element__label" id="file-selector-primary-label-97">Attachment</span>
<div class="slds-form-element__control">
<div class="slds-file-selector slds-file-selector_images">Integrated#
Invisible Dropzone (Container)
Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="slds-file-selector slds-file-selector_integrated slds-file-selector_integrated">
<div class="slds-file-selector__dropzone slds-file-selector__dropzone_integrated" aria-hidden="true">
<input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" tabindex="-1" />
<label class="slds-file-selector__body slds-file-selector__body_integrated" for="file-upload-input-01">States#
Drag#
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="slds-file-selector slds-file-selector_integrated slds-file-selector_integrated">
<div class="slds-file-selector__dropzone slds-file-selector__dropzone_integrated slds-has-drag" aria-hidden="true">
<input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" tabindex="-1" />
<label class="slds-file-selector__body slds-file-selector__body_integrated" for="file-upload-input-01">Dragover#
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="slds-file-selector slds-file-selector_integrated slds-file-selector_integrated">
<div class="slds-file-selector__dropzone slds-file-selector__dropzone_integrated slds-has-drag slds-has-drag-over" aria-hidden="true">
<input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" tabindex="-1" />
<label class="slds-file-selector__body slds-file-selector__body_integrated" for="file-upload-input-01">Dragover with error#
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="slds-file-selector slds-file-selector_integrated slds-file-selector_integrated">
<div class="slds-file-selector__dropzone slds-file-selector__dropzone_integrated slds-has-drag" aria-hidden="true">
<input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" disabled="" tabindex="-1" />
<label class="slds-file-selector__body slds-file-selector__body_integrated" for="file-upload-input-01">Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-file-selector |
|---|---|
| Summary | |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-file-selector__dropzone |
|---|---|
| Summary | Region that a file can be dropped within |
| Restrict | .slds-file-selector div |
| Selector | .slds-has-drag-over |
|---|---|
| Summary | |
| Restrict | .slds-file-selector__dropzone |
| Modifier | True |
| Selector | .slds-file-selector__input |
|---|---|
| Summary | Hidden input element |
| Restrict | .slds-file-selector input |
| Selector | .slds-file-selector__button |
|---|---|
| Summary | Faux button |
| Restrict | .slds-file-selector button, .slds-file-selector span |
| Selector | .slds-file-selector_files |
|---|---|
| Summary | 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. |
| Restrict | .slds-file-selector |
| Selector | .slds-file-selector__body |
|---|---|
| Summary | Container for file selector content, specifically within the dropzone |
| Restrict | .slds-file-selector label |
| Selector | .slds-file-selector__text |
|---|---|
| Summary | Descriptive call back text |
| Restrict | .slds-file-selector span |
| Selector | .slds-file-selector_images |
|---|---|
| Summary | Multi Line / Image Use as a dedicated dropzone for image files only. May require a cropping control. |
| Support | dev-ready |
| Restrict | .slds-file-selector |
| Variant | True |
| Selector | .slds-file-selector_integrated |
|---|---|
| Summary | Invisible Dropzone (Container) Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page. |
| Support | dev-ready |
| Restrict | .slds-file-selector |
| Variant | True |
| Selector | .slds-file-selector__dropzone_integrated |
|---|---|
| Summary | Specific to integrated file selector — region that a file can be dropped within |
| Restrict | .slds-file-selector_integrated div |
| Selector | .slds-has-drag |
|---|---|
| Summary | Informs dropzone that file has been dragged into the viewport |
| Restrict | .slds-file-selector__dropzone_integrated |
| Modifier | True |
| Selector | .slds-has-drag-over |
|---|---|
| Summary | Informs dropzone that file has been dragged into its region |
| Restrict | .slds-file-selector__dropzone_integrated |
| Modifier | True |
| Selector | .slds-file-selector__body_integrated |
|---|---|
| Summary | Specific to integrated file selector — container for file selector content, specifically within the dropzone |
| Restrict | .slds-file-selector_integrated label |
| Selector | .slds-file-selector__text_integrated |
|---|---|
| Summary | Specific to integrated file selector — Descriptive call back text |
| Restrict | .slds-file-selector_integrated span |
File Selector Release Notes
2.10.0
Changed
- For touch devices, the line-height is increased for a larger tap target size. This change comes from
slds-buttonwhich is used as a child component in file-selector.
2.7.0
Changed
- Replaced spacing tokens with variable spacing tokens to respond to a user's densification setting
- Reduced height to minimize whitespace