# File-Selector Component of the SBB design system Lyne. - Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`) - Structure: several elements that can be used on their own - Categories: Form - Status: Design guidelines complete ## Links - Page on digital.sbb.ch: https://digital.sbb.ch/en/design-system/lyne/components/file-selector/ - Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-file-selector--docs - Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/file-selector/overview (API: https://lyne-angular.app.sbb.ch/angular/components/file-selector/api) - Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-28 - GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/file-selector ## Elements - `sbb-file-selector`: It allows to select one or more file from storage devices and display them. - `sbb-file-selector-dropzone`: It allows to select one or more file from storage devices via button click or drag and drop, and display them. ## Overview ### What does the component do? With the file selector, users select one or more files from their device. The selected files appear in a list with name and size and can be removed again. There are two variants: button and dropzone. In the dropzone, files can be dropped by drag and drop. ### When should the component be used? * To attach files such as documents, images or videos. * To complete forms that require file attachments. ### Rules. * The dropzone suits several or large files, the button suits single files and limited space. * Permitted file types are restricted and communicated to users. * It is clear whether several files are possible. * Errors (e.g. wrong file type) are shown with an understandable error message. * The component only selects. Uploading and any progress display are handled by the application. * A custom accessibility label tells button and dropzone apart for screen readers. ## Implementation (web components) The `` and `` are components which allows user to select one or more files from storage devices. These are two variants with the same functionality. When files are selected, they appear as a list below the button/dropzone area. For each file, the name and the size are displayed and an icon allows for deletion. The component mimics the native ``. ```html ``` The dropzone variant is displayed as a panel on which files can more easily be dragged and dropped. It is possible to customize the area's title via the `titleContent` property. ```html ``` ### Slots The `error` named slot can be used to display an error message using the `` component. ```html

An error occurred during file upload.

``` ### States User interaction can be disabled using the `disabled` property. ```html ``` #### Multiple and multipleMode A single file can be selected by default; this can be changed setting the `multiple` property to `true`. ```html ``` The value of the `multipleMode` property determines whether added files should overwrite existing files (`default`) or be appended to them (`persistent`). ```html ``` #### Accept The `accept` property can be used to force the user to select one or more specific file types; in the next example, only images are allowed. ```html ``` ### Style The component has also two different sizes, `s` and `m`, which can be changed using the `size` property. ```html ``` #### Events Whenever the selection changes, a `filechanged` event is fired, whose `event.files` property contains the list of currently selected files. The list can also be retrieved using the public `files` getter. ### Accessibility It's possible to improve the component accessibility using the `accessibilityLabel` property; this will be set as `aria-label` of the inner native input and read together with the visible button text. It's suggested to have a different value for each variant, e.g.: ```html

``` ## API (web components) Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/file-selector/api.md