FileInput

Full screen (fullScreen)

Covers the viewport (fixed), implicitly noDropBorder. Overlay only when dragging files from the OS (not text from anywhere). On a page with multiple zones, enable it conditionally (e.g. a checkbox), otherwise it will override the whole page.

Enable full-screen drop (overlays the previews below)

tsx

import { $, component$, useSignal } from "@builder.io/qwik";
import { FileInput } from "~/components/ui/base/file-input";

export default component$(() => {
  const enabled = useSignal(false);
  return (
    <>
      <label class="flex cursor-pointer items-center gap-2 text-callout text-label">
        <input
          type="checkbox"
          class="h-4 w-4 rounded border-separator-opaque accent-accent"
          checked={enabled.value}
          onChange$={$((_, el) => {
            enabled.value = el.checked;
          })}
        />
        Enable full-screen drop (overlays the previews below)
      </label>
      {enabled.value ? (
        <FileInput.DropArea fullScreen dropLabel="Drop files">
          <FileInput.Input name="fullscreen-demo" hidden multiple />
        </FileInput.DropArea>
      ) : null}
    </>
  );
});

Drop zone + hidden input

On drag over the border and background change; the text from dropLabel appears over the zone.

No file selected

tsx

import { FileInput } from "~/components/ui/base/file-input";

<FileInput.DropArea dropLabel="Drop a file here" class="max-w-lg">
  <FileInput.Input name="doc" hidden accept=".pdf,.png" />
</FileInput.DropArea>

Multiple files (hidden input)

Multiple files via multiple on the hidden input.

No file selected

tsx

import { FileInput } from "~/components/ui/base/file-input";

<FileInput.DropArea dropLabel="Drop one or more files" class="max-w-lg">
  <FileInput.Input name="demo-multi" hidden multiple />
</FileInput.DropArea>

Multiple files (visible input)

The same interface with a visible file input in the zone content.

tsx

import { FileInput } from "~/components/ui/base/file-input";

<FileInput.DropArea dropLabel="Drop one or more files" class="max-w-lg">
  <FileInput.Input name="demo-multi" multiple />
</FileInput.DropArea>

Without overlay (noDropOverlay)

noDropOverlay highlights only the border during a drag — without the semi-transparent area with text.

Drag a file here or click below.

No file selected

tsx

import { FileInput } from "~/components/ui/base/file-input";

<FileInput.DropArea noDropOverlay class="max-w-lg">
  <p class="mb-3 text-callout text-secondary-label">Drag a file here or click below.</p>
  <FileInput.Input name="nodrop-overlay" hidden />
</FileInput.DropArea>

Without border (noDropBorder)

noDropBorder removes the border and padding — just the content in a clean area; the overlay is turned off automatically.

Drag a file here, or click below.

No file selected

tsx

import { FileInput } from "~/components/ui/base/file-input";

<FileInput.DropArea noDropBorder class="max-w-lg">
  <p class="text-callout text-secondary-label">Drag a file here, or click below.</p>
  <FileInput.Input name="nodrop-border" hidden />
</FileInput.DropArea>

Sizes (variant)

Prop variant: xl, lg, md (default), sm, xs. FileInput.Input reads context from FileInput.DropArea, so wrap it in a DropArea (noDropBorder keeps it frameless).

tsx

import { FileInput } from "~/components/ui/base/file-input";

<FileInput.DropArea noDropBorder class="flex flex-col gap-4">
  <FileInput.Input variant="xl" />
  <FileInput.Input variant="lg" />
  <FileInput.Input variant="md" />
  <FileInput.Input variant="sm" />
  <FileInput.Input variant="xs" />
</FileInput.DropArea>

Metadata

Source: meta.generated.json (see npm run generate)

File base/file-input/meta.generated.json not found or path not allowed.