File Trigger
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.
Installation
Preview
Examples
Folder
A FileTrigger that allows users to select a folder from the file system.
Multiple
A FileTrigger that enables users to select multiple files.
Camera
A FileTrigger that lets users capture images using their device's camera.
Avatar
A FileTrigger that allows users to select an avatar from their file system. It integrates components like avatar and drop-zone, enabling users to either drag and drop or manually select a file.
This how you can use the FileTrigger combined with an Avatar component.
Pending
A FileTrigger can indicate a pending state using the isPending prop. This provides feedback for actions that take time, communicates the status to assistive technologies, and disables interactions except for focus.
Controlled
You can use the onSelect prop to snag the selected files.
Disabled
A FileTrigger that is disabled.
API Reference
FileTrigger
The FileTrigger component opens the system file picker from a styled trigger.
| Prop | Type | Default |
|---|---|---|
className | string | - |
variant | "default" | "outline" | "ghost" | "destructive" | "secondary" | "link" | "default" |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" |
isDisabled | boolean | - |
isPending | boolean | - |