@sikt/sds-input-file

Consume

npm i -s @sikt/sds-{form,input-file}

React

import { InputFile, FileList, FileListItem } from "@sikt/sds-input-file";
import "@sikt/sds-form/dist/index.css";
import "@sikt/sds-input-file/dist/index.css";

<>
  <InputFile
    label="Upload documentation"
    aria-label="Upload documentation"
    accept=".doc,.docx"
    onChange={changeHandler}
  />
  <FileList figCaption="Attatchments">
    files.map((file) => {
      <FileListItem
        fileSize={file.size}
        actionProps{{ label: `Remove ${file.name}`, onClick: handleFileClick }}
      >
        {file.name}
      </FileListItem>
    })
  </FileList>
</>

Caveats

• "aria-label": Should be the text content of the label prop. This is used to override React Aria DropZone that sets it's own aria-label.
• accept: Does not currently support wildcard (for example "*" or "image/*")

Stylesheets & custom markup

Import stylesheet:

@import url("@sikt/sds-form");
@import url("@sikt/sds-input-file");

Create custom markup:

<!-- N/A -->