File Trigger
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/file-trigger
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components @heroicons/react tailwind-variants
Anatomy
import { FileTrigger } from "@/components/ui/file-trigger"
<FileTrigger />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.
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Combine FileTrigger with Avatar to select a profile image.
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.
Circle
Use a circular trigger button.
Controlled
Use onSelect to receive the selected files.
Disabled
Set isDisabled to prevent file selection.
Component API
FileTrigger
FileTrigger extends the React Aria Components <FileTrigger> component.
classNamestringintent"primary" | "secondary" | "warning" | "danger" | "success" | "outline" | "plain"outlineisCircletrue | falsefalseisDisabledbooleanisPendingbooleansize"xs" | "sm" | "md" | "lg" | "sq-xs" | "sq-sm" | "sq-md" | "sq-lg"mdSee the React Aria for the full API reference.
