This page ships a Markdown twin for AI tools.

ComponentsFileUpload

formstexulinot agent-emittableapp

FileUpload

file-upload

A labelled drop zone and file list for choosing local files.

Forms with the wiring documented, not guessed. Form controls take labels, descriptions and error text through props, and their keyboard and screen-reader behavior is documented in the accessibility notes below — generated from the manifest, not hand-maintained. The repository’s behavior suite holds the underlying patterns on Chromium, WebKit and a Pixel 7.

Live examples

Images

Images

Loading demo…

In your theme

This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.

  • Violet

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Monochrome

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Accessible Dark Contrast

    dark mode · AAA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

Props

Public props for FileUpload
NameKindRequiredDefaultDescription
filesarrayno—Accepted files (bind:files)
acceptstringno—A native accept filter, e.g. image/*
maxSizenumberno—Largest file in bytes
maxFilesnumberno——
multiplebooleannotrue—
disabledbooleannofalse—
requiredbooleannofalse—
namestringno——
variantenum (default, compact)no"default"—
showPreviewsbooleannotrue—
labelsobjectno——
onFilesAddeventno——
onFileRemoveeventno——
classstringno——

Keyboard

Keyboard behavior for FileUpload
KeyAction
A, aA real file input; the drop zone is named; rejected files are listed with a reason.

Accessibility

  • A real file input; the drop zone is named; rejected files are listed with a reason.

Evidence for file-upload

Latest committed gates for file-upload (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/file-upload · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • The person attaches files to a form the host owns

Don’t use when

Prefer another component

  • Remote media the agent names as URLs (use media-image)