FileList

Fillista, uppladdade filer

Storybook

Komponent för att visa en lista med uppladdade filer. Varje rad visar filnamn, valfri filstorlek och en knapp för att ta bort filen.

import { FileList, FileListItem } from '@midas-ds/components'

<FileList aria-label='Uppladdade filer'>
  <FileListItem
    fileName='CV_Anna_Svensson.pdf'
    fileSize='1.2 MB'
    onDelete={() => {}}
  />
</FileList>

• CV_Anna_Svensson.pdf1.2 MB

Utan filstorlek

fileSize är valfritt och kan utelämnas.

<FileList aria-label='Uppladdade filer'>
  <FileListItem fileName='CV_Anna_Svensson.pdf' onDelete={() => {}} />
</FileList>

• CV_Anna_Svensson.pdf

Utan borttagningsknapp

Utelämna onDelete för att visa en skrivskyddad lista.

<FileList aria-label='Bifogade filer'>
  <FileListItem fileName='Beslut.pdf' fileSize='512 KB' />
  <FileListItem fileName='Bilaga_1.pdf' fileSize='1.1 MB' />
</FileList>

• Beslut.pdf512 KB
• Bilaga_1.pdf1.1 MB

Tillgänglighet

FileList renderar en semantisk <ul>-lista där varje borttagningsknapp är direkt nåbar via tangentbordet.

Tangent	Åtgärd
Tab / Shift+Tab	Navigera mellan borttagningsknappar
Enter / Space	Aktivera borttagningsknappen

Komponenten hanterar inte fokus efter borttagning — det är konsumentens ansvar att flytta fokus när ett objekt faktiskt tas bort från listan.

aria-label på FileList är obligatoriskt och beskriver listans syfte för skärmläsare. Borttagningsknappen har ett automatiskt genererat aria-label baserat på filnamnet, t.ex. "Remove CV_Anna_Svensson.pdf".

API

FileList

FileListItem

Name	Type	Default	Description
fileName *	string	-
fileSize	string	-
className	string	-