File Picker
Compound file-picker dialog with sidebar, search, breadcrumb, list, preview column, dropzone, and footer. Framed sizes (basic/medium/large) follow the DS kit; FilePickerView embeds the same chrome without a dialog.
Import
Live Demo
File upload with drag-and-drop support and previews.
With sidebar
Simple (no sidebar)
With dropzone
Framed large (with preview)
Item variants
Simple
Big Icon
Tab into items above to see the focus ring (sidebar-ring/50).
Embedded view (no dialog)
Embedded picker
Rendered inline — no Radix dialog
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "xl" | "basic" | "medium" | "large" | "default" | FilePickerContent size. basic/medium/large render the DS-kit framed chrome (header + inset layout + footer); medium/large add the floating close button when showCloseButton is set |
| showCloseButton | boolean | false | Render the close button on FilePickerContent |
| leftSlot | ReactNode | — | FilePickerFooter left slot (e.g. "Upload to" label + destination dropdown) |
| children | ReactNode | — | FilePickerAside content: a generic trailing region — compose a preview, metadata or actions |
| accept | string | — | FilePickerDropzone accepted file types (e.g., '.pdf,.doc') |
| multiple | boolean | false | FilePickerDropzone: allow multiple file selection |