File Trigger

A file trigger allows a user to access the file system with any pressable element.

On this page

Props

allowsMultiple

<FileTrigger>
  <Button>Upload File</Button>
</FileTrigger>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/file-trigger

Usage

Use file triggers to allow users to upload files using any pressable element.

import { Button } from '@/components/ui/button'
import { FileTrigger } from '@/components/ui/file-trigger'

<FileTrigger onSelect={(e) => console.log(e)}>
  <Button>Upload File</Button>
</FileTrigger>

Examples

API Reference

A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.

Prop	Type	Default
	`boolean`	`—`
	`readonly string[]`	`—`
	`boolean`	`—`
	`ReactNode`	`—`
	`"environment" \| "user"`	`—`

Last updated on 6/16/2026