Hewn
Components

Components

FileUpload

Drag-and-drop file zone with browse trigger and removable file list.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add file-upload

Combines React Aria DropZone and FileTrigger. Browse or drop files, then remove items from the list before submit.

Brand mark
Drop files here, or browse from disk.

SVG or PNG up to a few megabytes.

  • andruia-mark.svg
    41 B
Release attachments
Drop changelog assets here, or browse from disk.

Usage

TSX
import { FileUpload } from "@hewnui/ui";

<FileUpload
  label="Brand mark"
  acceptedFileTypes={["image/png", "image/svg+xml"]}
  allowsMultiple={false}
  onFilesChange={(files) => console.log(files)}
/>

States

  • Empty drop prompt with browse action
  • Drop target highlight (solid accent edge + press scale)
  • Selected file list with remove actions
  • Invalid + errorMessage
  • Disabled

Under the global glass material, the zone and file rows pick up tinted frost while the dashed drop edge stays readable.

Accessibility

  • Drop zone is keyboard focusable
  • Browse uses a pressable Button via FileTrigger
  • Remove actions are named per file

API reference

Props for FileUpload from @hewnui/ui/file-upload. Generated from component types — not hand-written.

Prop

Type

InputOTP

Segmented one-time code entry with paste and keyboard navigation.

Checkbox

Binary selection control with motion-aware check feedback.

On this page

UsageStatesAccessibility