File Trigger / File Input

A button that opens the native file picker. For drag and drop, use FileDropZone.

Import

import { FileTrigger } from '@marbleui/ui'

Props

<FileTrigger>

Prop	Type	Default	Description
children	`ReactNode`	`'Choose file'`
onSelect	`(files: File[]) => void`	`—`
showFileNames	`boolean`	`true`	Show the chosen file names next to the button.
variant	`'soft' \| 'outline' \| 'danger' \| 'solid' \| 'ghost'`	`'outline'`

Also accepts React Aria props (74).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria FileTrigger. Follow the primitive's docs for the full keyboard map.

Usage notes

A button that opens the native file picker and shows the chosen file name. For drag and drop use FileDropZone.

<FileTrigger
  acceptedFileTypes={['application/pdf']}
  onSelect={(files) => upload(files)}
>
  Upload PDF
</FileTrigger>

onSelect receives a plain File[]. Children are the button label, default “Choose file”.
Passes acceptedFileTypes, allowsMultiple, defaultCamera and acceptDirectory to React Aria FileTrigger.
showFileNames (default true) renders “No file chosen” or the name beside the button. Turn it off if you render your own list.
variant takes any Button variant, outline by default. It does not validate size or type beyond the picker’s accept.

Example source · show

import { FileTrigger } from './file-trigger'

export const styles = {
  Outline: () => <FileTrigger acceptedFileTypes={['application/pdf']}>Upload PDF</FileTrigger>,
  Multiple: () => (
    <FileTrigger allowsMultiple variant="soft">
      Add attachments
    </FileTrigger>
  ),
  Camera: () => (
    <FileTrigger acceptedFileTypes={['image/*']} defaultCamera="environment" variant="solid">
      Take photo
    </FileTrigger>
  ),
}

Source: packages/ui/src/file-trigger/file-trigger.tsx

Catalog

Category: inputs
Priority: Core
Primitive: react-aria
React Aria: FileTrigger