FileInputArea

Basic usage

If you don't have a visible label, supply an aria-label for screen readers.

Mark text that should get underlined on hover with .bf-neutral-link-text.

<FileInputArea aria-label="Upload file">
  Drag & drop file or
  <span className="bf-neutral-link-text">click to upload</span>
</FileInputArea>
<FileInputArea aria-label="Upload file">
  Drag & drop file or
  <span className="bf-neutral-link-text">click to upload</span>
</FileInputArea>

Area content

We recommend filling the droppable area with a .bfc-base-2 colored faArrowUpFromBracket icon and information about how and what you can do:

<FileInputArea aria-label="Upload file">
  <Icon
    icon={faArrowUpFromBracket}
    className="bfc-base-2"
    style={{ marginBottom: 8 }}
  />
  <div>
    Drag & drop file or{" "}
    <span className="bf-neutral-link-text">click to upload</span>
  </div>
  <div className="bfc-base-2">.csv file, less than 10 MB</div>
</FileInputArea>
<FileInputArea aria-label="Upload file">
  <Icon
    icon={faArrowUpFromBracket}
    className="bfc-base-2"
    style={{ marginBottom: 8 }}
  />
  <div>
    Drag & drop file or{" "}
    <span className="bf-neutral-link-text">click to upload</span>
  </div>
  <div className="bfc-base-2">.csv file, less than 10 MB</div>
</FileInputArea>

Visible label

If you want a visible label, you can omit aria-label and instead give the <FileInputArea> a unique id and connect it to the <Label> with htmlFor:

<Label htmlFor="my-file-input-area">Upload file</Label>
<FileInputArea id="my-file-input-area" ... />
<Label htmlFor="my-file-input-area">Upload file</Label>
<FileInputArea id="my-file-input-area" ... />

Alert state

<FileInputArea state="alert" ... />
<FileInputArea state="alert" ... />

Disabled

<FileInputArea disabled ... />
<FileInputArea disabled ... />

If you have a <Label>, mark that as disabled as well:

<Label disabled htmlFor="disabled-label-file-input-area">Upload file</Label>
<FileInputArea disabled id="disabled-label-file-input-area" ... />
<Label disabled htmlFor="disabled-label-file-input-area">Upload file</Label>
<FileInputArea disabled id="disabled-label-file-input-area" ... />