Komponents
Components

Components

FileUpload

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

newfree
pnpm add @komponents/uiCanonical TypeScript source · tree-shakeable subpaths

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

Snippet
import { FileUpload } from "@komponents/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

InputOTP

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

Checkbox

Binary selection control with motion-aware check feedback.

On this page

UsageStatesAccessibility