All components
File Upload
Dashed dropzone with a file item list showing names, sizes, and delete triggers.
Drag files here or click to browse
- brand-guidelines.pdf1.26 MB
- logo.svg18.4 kB
Install
zsh — file-upload
1bunx stylexblocks add file-uploadUsage — Ark UI
file-upload.tsx
1234567891011121314151617181920212223242526272829303132import { FileUpload } from "#components/ui/ark-ui/file-upload.tsx";
export function Example() { return ( // machine parts styled by the recipe — ItemDeleteTrigger ships a // default close icon; ItemName/ItemSizeText fill in from the file <FileUpload.Root maxFiles={5}> <FileUpload.Label>Attachments</FileUpload.Label> <FileUpload.Dropzone> <FileUpload.DropzoneContent> Drag files here or click to browse </FileUpload.DropzoneContent> </FileUpload.Dropzone> <FileUpload.ItemGroup> <FileUpload.Context> {(api) => api.acceptedFiles.map((file) => ( <FileUpload.Item key={file.name} file={file}> <FileUpload.ItemContent> <FileUpload.ItemName /> <FileUpload.ItemSizeText /> </FileUpload.ItemContent> <FileUpload.ItemDeleteTrigger /> </FileUpload.Item> )) } </FileUpload.Context> </FileUpload.ItemGroup> <FileUpload.HiddenInput /> </FileUpload.Root> );}