Ark UI Logo
DocsExamplesBlogPlus
GitHub
Components
File upload

File Upload

A component that is used to upload multiple files.

Loading...

Anatomy

To set up the file upload component correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the FileUpload component in your project. Let's take a look at the most basic example:

import { FileUpload } from '@ark-ui/react/file-upload'
import { FileIcon } from 'lucide-react'

export const Basic = () => {
  return (
    <FileUpload.Root maxFiles={5}>
      <FileUpload.Label>File Upload</FileUpload.Label>
      <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {({ acceptedFiles }) =>
            acceptedFiles.map((file) => (
              <FileUpload.Item key={file.name} file={file}>
                <FileUpload.ItemPreview type="image/*">
                  <FileUpload.ItemPreviewImage />
                </FileUpload.ItemPreview>
                <FileUpload.ItemPreview type=".*">
                  <FileIcon />
                </FileUpload.ItemPreview>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
                <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
              </FileUpload.Item>
            ))
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

Initial Files

Use the defaultAcceptedFiles prop to set the initial files in the file upload component.

import { FileUpload } from '@ark-ui/react/file-upload'
import { FileIcon } from 'lucide-react'

export const InitialFiles = () => {
  return (
    <FileUpload.Root
      defaultAcceptedFiles={[new File(['Welcome to Ark UI React`'], 'README.md', { type: 'text/plain' })]}
    >
      <FileUpload.Label>File Upload</FileUpload.Label>
      <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {({ acceptedFiles }) =>
            acceptedFiles.map((file) => (
              <FileUpload.Item key={file.name} file={file}>
                <FileIcon />
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
              </FileUpload.Item>
            ))
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

Clear Trigger

Use the ClearTrigger component to provide users with a way to remove all uploaded files at once. This trigger will clear both accepted and rejected files from the upload component.

import { FileUpload } from '@ark-ui/react/file-upload'

export const ClearTrigger = () => {
  return (
    <FileUpload.Root maxFiles={5} accept="image/png,image/jpeg">
      <FileUpload.Label>File Upload</FileUpload.Label>
      <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
      <FileUpload.ClearTrigger>Clear Files</FileUpload.ClearTrigger>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {({ acceptedFiles }) =>
            acceptedFiles.map((file) => (
              <FileUpload.Item key={file.name} file={file}>
                <FileUpload.ItemPreview type="image/*">
                  <FileUpload.ItemPreviewImage />
                </FileUpload.ItemPreview>
                <FileUpload.ItemName />
              </FileUpload.Item>
            ))
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

Drag & Drop

Use the Dropzone component to enable drag-and-drop functionality. The dropzone provides adds a data-dragging attribute while dragging for styling purposes.

import { FileUpload } from '@ark-ui/react/file-upload'

export const DragAndDrop = () => {
  return (
    <FileUpload.Root accept="image/*" maxFiles={3}>
      <FileUpload.Dropzone>Drag and drop your images here</FileUpload.Dropzone>

      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {({ acceptedFiles }) =>
            acceptedFiles.map((file) => (
              <FileUpload.Item key={file.name} file={file} className="file-item">
                <FileUpload.ItemPreview type="image/*">
                  <FileUpload.ItemPreviewImage />
                </FileUpload.ItemPreview>
                <FileUpload.ItemName />
              </FileUpload.Item>
            ))
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>

      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

Directory Upload

Use the directory prop to allow users to upload entire folders. This enables selecting multiple files from a directory structure while preserving the folder hierarchy.

import { FileUpload } from '@ark-ui/react/file-upload'

export const DirectoryUpload = () => {
  return (
    <FileUpload.Root directory>
      <FileUpload.Trigger>Upload Folder</FileUpload.Trigger>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {({ acceptedFiles }) =>
            acceptedFiles.map((file) => (
              <FileUpload.Item key={file.name} file={file}>
                <FileUpload.ItemName>{file.webkitRelativePath ?? file.name}</FileUpload.ItemName>
              </FileUpload.Item>
            ))
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

The file.webkitRelativePath property contains the full path of each file within the uploaded directory, allowing you to display the folder structure or process files based on their location.

Accepted File Types

Use the accept prop to restrict the file types that can be uploaded. This prop accepts MIME types (e.g., image/png, image/jpeg) or file extensions (e.g., .pdf, .txt).

When users attempt to upload files that don't match the accepted types, these files will be automatically rejected and appear in the rejectedFiles array with a FILE_INVALID_TYPE error code.

import { FileUpload } from '@ark-ui/react/file-upload'

export const AcceptedFileTypes = () => {
  return (
    <FileUpload.Root accept="image/png,image/jpeg">
      <FileUpload.Label>File Upload (PNG and JPEG only)</FileUpload.Label>
      <FileUpload.Dropzone>Drop your files here</FileUpload.Dropzone>
      <FileUpload.Trigger>Select Files</FileUpload.Trigger>

      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {({ acceptedFiles }) =>
            acceptedFiles.map((file) => (
              <FileUpload.Item key={file.name} file={file}>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
                <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
              </FileUpload.Item>
            ))
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>

      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {({ rejectedFiles }) =>
            rejectedFiles.map((fileRejection) => (
              <FileUpload.Item key={fileRejection.file.name} file={fileRejection.file}>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
                <div>
                  {fileRejection.errors.map((error) => (
                    <div key={error} style={{ color: 'red' }}>
                      {error}
                    </div>
                  ))}
                </div>
              </FileUpload.Item>
            ))
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>

      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

Error Handling

The FileUpload component provides comprehensive validation and error handling capabilities. You can set various constraints and handle different types of validation errors:

Built-in Validation Props:

  • maxFiles - Maximum number of files allowed
  • maxFileSize - Maximum file size in bytes
  • minFileSize - Minimum file size in bytes
  • accept - Allowed MIME types or file extensions

Built-in Error Types:

  • TOO_MANY_FILES - Exceeds maxFiles limit
  • FILE_INVALID_TYPE - File type not in accept list
  • FILE_TOO_LARGE - File size exceeds maxFileSize
  • FILE_TOO_SMALL - File size below minFileSize
  • FILE_INVALID - Generic validation failure
  • FILE_EXISTS - Duplicate file detected
import { FileUpload, type FileUploadFileError } from '@ark-ui/react/file-upload'

const errorMessages: Record<FileUploadFileError, string> = {
  TOO_MANY_FILES: '📊 Too many files selected (max 3 allowed)',
  FILE_INVALID_TYPE: '🚫 Invalid file type (only images and PDFs allowed)',
  FILE_TOO_LARGE: '📏 File too large (max 1MB)',
  FILE_TOO_SMALL: '📐 File too small (min 1KB)',
  FILE_INVALID: '⚠️ Invalid file',
  FILE_EXISTS: '🔄 File already exists',
}

export const ErrorHandling = () => {
  return (
    <FileUpload.Root
      maxFiles={3}
      maxFileSize={1024 * 1024} // 1MB
      minFileSize={1024} // 1KB
      accept="image/*,application/pdf"
    >
      <FileUpload.Label>File Upload with Validation</FileUpload.Label>
      <FileUpload.Trigger>Select Files</FileUpload.Trigger>

      {/* Accepted Files Section */}
      <div data-status="accepted">
        <h3>✅ Accepted Files</h3>
        <FileUpload.ItemGroup>
          <FileUpload.Context>
            {({ acceptedFiles }) =>
              acceptedFiles.length === 0 ? (
                <div>No files uploaded yet</div>
              ) : (
                acceptedFiles.map((file) => (
                  <FileUpload.Item key={file.name} file={file} className="file-item" data-status="accepted">
                    <FileUpload.ItemPreview type="image/*">
                      <FileUpload.ItemPreviewImage />
                    </FileUpload.ItemPreview>
                    <FileUpload.ItemPreview type="application/pdf">
                      <div data-type="pdf">PDF</div>
                    </FileUpload.ItemPreview>
                    <FileUpload.ItemName />
                    <FileUpload.ItemSizeText />
                    <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
                  </FileUpload.Item>
                ))
              )
            }
          </FileUpload.Context>
        </FileUpload.ItemGroup>
      </div>

      {/* Rejected Files Section */}
      <div data-status="rejected">
        <h3>❌ Rejected Files</h3>
        <FileUpload.ItemGroup>
          <FileUpload.Context>
            {({ rejectedFiles }) =>
              rejectedFiles.length === 0 ? (
                <div>No rejected files</div>
              ) : (
                rejectedFiles.map((fileRejection) => (
                  <FileUpload.Item
                    key={fileRejection.file.name}
                    file={fileRejection.file}
                    className="file-item"
                    data-status="rejected"
                  >
                    <FileUpload.ItemName />
                    <FileUpload.ItemSizeText />
                    <div>
                      <strong>Validation Errors:</strong>
                      {fileRejection.errors.map((error, index) => (
                        <div key={index} data-error-code={error}>
                          {errorMessages[error as FileUploadFileError] || `❓ ${error}`}
                        </div>
                      ))}
                    </div>
                  </FileUpload.Item>
                ))
              )
            }
          </FileUpload.Context>
        </FileUpload.ItemGroup>
      </div>

      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

File Transformations

Use the transformFiles prop to process files before they're added to the accepted files list. This is useful for file compression, format conversion, or adding metadata.

Common transformation use cases:

  • Image compression: Use image-conversion, browser-image-compression, or similar libraries
  • Format conversion: Convert files to different formats (e.g., HEIC to JPEG)
  • Metadata extraction: Add EXIF data or other file information
  • File validation: Perform additional checks beyond basic validation
  • Resizing: Automatically resize images to specific dimensions
import { FileUpload } from '@ark-ui/react/file-upload'
import { compressAccurately } from 'image-conversion'

export const FileTransformations = () => {
  const transformFiles = async (files: File[]) => {
    return Promise.all(
      files.map(async (file) => {
        if (file.type.startsWith('image/')) {
          try {
            // Compress image to ~200KB
            const blob = await compressAccurately(file, 200)
            return new File([blob], file.name, { type: blob.type })
          } catch (error) {
            console.error('Compression failed for:', file.name, error)
            return file
          }
        }
        return file // Return non-image files as-is
      }),
    )
  }

  return (
    <FileUpload.Root accept="image/*" maxFiles={5} transformFiles={transformFiles}>
      <FileUpload.Label>File Upload with Compression</FileUpload.Label>
      <FileUpload.Trigger>Choose Images</FileUpload.Trigger>

      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {({ acceptedFiles }) =>
            acceptedFiles.map((file) => (
              <FileUpload.Item key={file.name} file={file} className="file-item">
                <FileUpload.ItemPreview type="image/*">
                  <FileUpload.ItemPreviewImage />
                </FileUpload.ItemPreview>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
                <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
              </FileUpload.Item>
            ))
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>

      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

Custom Validation

Use the validate prop to implement custom validation logic beyond the built-in constraints.

import { FileUpload } from '@ark-ui/react/file-upload'
import { FileIcon } from 'lucide-react'

export const WithValidation = () => {
  return (
    <FileUpload.Root
      validate={(file) => {
        if (file.name.length > 20) return ['FILE_NAME_TOO_LONG']
        return null
      }}
    >
      <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {({ acceptedFiles }) =>
            acceptedFiles.map((file) => (
              <FileUpload.Item key={file.name} file={file}>
                <FileUpload.ItemPreview type="image/*">
                  <FileUpload.ItemPreviewImage />
                </FileUpload.ItemPreview>
                <FileUpload.ItemPreview type=".*">
                  <FileIcon />
                </FileUpload.ItemPreview>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
                <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
              </FileUpload.Item>
            ))
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

Field

Here's an example of how to use the FileUpload component with the Field component to provide a error and helper text.

import { Field } from '@ark-ui/react/field'
import { FileUpload } from '@ark-ui/react/file-upload'

export const WithField = (props: Field.RootProps) => (
  <Field.Root {...props}>
    <FileUpload.Root maxFiles={5}>
      <FileUpload.Label>Label</FileUpload.Label>
      <FileUpload.Trigger>Select</FileUpload.Trigger>
      <FileUpload.ItemGroup />
      <FileUpload.HiddenInput data-testid="input" />
    </FileUpload.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
)

Root Provider

Use the useFileUpload hook to create the file upload store and pass it to the RootProvider component. This allows you to have maximum control over the file upload programmatically.

If you're using the RootProvider component, you don't need to use the Root component.

import { FileUpload, useFileUpload } from '@ark-ui/react/file-upload'
import { FileIcon } from 'lucide-react'

export const RootProvider = () => {
  const fileUpload = useFileUpload({ maxFiles: 5 })

  return (
    <>
      <button onClick={() => fileUpload.clearFiles()}>Clear</button>

      <FileUpload.RootProvider value={fileUpload}>
        <FileUpload.Label>File Upload</FileUpload.Label>
        <FileUpload.Dropzone>Drag your file(s) here</FileUpload.Dropzone>
        <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
        <FileUpload.ItemGroup>
          <FileUpload.Context>
            {({ acceptedFiles }) =>
              acceptedFiles.map((file) => (
                <FileUpload.Item key={file.name} file={file}>
                  <FileUpload.ItemPreview type="image/*">
                    <FileUpload.ItemPreviewImage />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemPreview type=".*">
                    <FileIcon />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemName />
                  <FileUpload.ItemSizeText />
                  <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
                </FileUpload.Item>
              ))
            }
          </FileUpload.Context>
        </FileUpload.ItemGroup>
        <FileUpload.HiddenInput />
      </FileUpload.RootProvider>
    </>
  )
}

Pasting Files

Use the setClipboardFiles method to enable pasting images directly from the clipboard.

You can access the fileUpload store from FileUpload.Context as well.

import { FileUpload, useFileUpload } from '@ark-ui/react/file-upload'
import { XIcon } from 'lucide-react'

export const WithPaste = () => {
  const fileUpload = useFileUpload({ maxFiles: 3, accept: 'image/*' })

  return (
    <FileUpload.RootProvider value={fileUpload}>
      <FileUpload.Label>File Upload with Paste</FileUpload.Label>
      <textarea
        placeholder="Paste image here..."
        onPaste={(e) => {
          fileUpload.setClipboardFiles(e.clipboardData)
        }}
      />
      <FileUpload.ItemGroup>
        {fileUpload.acceptedFiles.map((file) => (
          <FileUpload.Item key={file.name} file={file}>
            <FileUpload.ItemPreview type="image/*">
              <FileUpload.ItemPreviewImage />
            </FileUpload.ItemPreview>
            <FileUpload.ItemDeleteTrigger>
              <XIcon />
            </FileUpload.ItemDeleteTrigger>
          </FileUpload.Item>
        ))}
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.RootProvider>
  )
}

Guides

File Previews

The FileUpload component provides flexible preview options for different file types. Use ItemPreview with type matching to show appropriate previews based on file format.

Preview Types:

  • type="image/*": Shows image thumbnails using ItemPreviewImage
  • type="video/*": For video file previews
  • type="application/pdf": For PDF files
  • type=".*": Generic fallback for any file type
<FileUpload.ItemPreview type="image/*">
  <FileUpload.ItemPreviewImage />
</FileUpload.ItemPreview>

<FileUpload.ItemPreview type="video/*">
  <VideoIcon />
</FileUpload.ItemPreview>

<FileUpload.ItemPreview type="application/pdf">
  <PdfIcon />
</FileUpload.ItemPreview>

<FileUpload.ItemPreview type=".*">
  <FileIcon />
</FileUpload.ItemPreview>

File Metadata Display:

  • ItemName - Shows the file name
  • ItemSizeText - Shows formatted file size (e.g., "2.5 MB")

Disable dropzone

To disable drag-and-drop functionality, set the allowDrop prop to false.

<FileUpload.Root allowDrop={false}>{/* ... */}</FileUpload.Root>

Prevent document drop

By default, when the dropzone is active, we prevent accidental navigation when files are dropped outside the dropzone. To prevent this behavior, set the preventDocumentDrop prop to false.

<FileUpload.Root preventDocumentDrop={false}>{/* ... */}</FileUpload.Root>

Prevent double open

When you want to delegate clicking to the trigger and remove the dropzone from the tab order, you can use the disableClick prop. This prevents the the file picker from opening twice.

<FileUpload.Dropzone disableClick>
  <FileUpload.Trigger>Choose Files</FileUpload.Trigger>
  Drag files here
</FileUpload.Dropzone>

API Reference

Root

PropDefaultType
accept
Record<string, string[]> | FileMimeType | FileMimeType[]

The accept file types

acceptedFiles
File[]

The controlled accepted files

allowDroptrue
boolean

Whether to allow drag and drop in the dropzone element

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
capture
'user' | 'environment'

The default camera to use when capturing media

defaultAcceptedFiles
File[]

The default accepted files when rendered. Use when you don't need to control the accepted files of the input.

directory
boolean

Whether to accept directories, only works in webkit browsers

disabled
boolean

Whether the file input is disabled

ids
Partial<{ root: string dropzone: string hiddenInput: string trigger: string label: string item: (id: string) => string itemName: (id: string) => string itemSizeText: (id: string) => string itemPreview: (id: string) => string }>

The ids of the elements. Useful for composition.

invalid
boolean

Whether the file input is invalid

locale'en-US'
string

The current locale. Based on the BCP 47 definition.

maxFiles1
number

The maximum number of files

maxFileSizeInfinity
number

The maximum file size in bytes

minFileSize0
number

The minimum file size in bytes

name
string

The name of the underlying file input

onFileAccept
(details: FileAcceptDetails) => void

Function called when the file is accepted

onFileChange
(details: FileChangeDetails) => void

Function called when the value changes, whether accepted or rejected

onFileReject
(details: FileRejectDetails) => void

Function called when the file is rejected

preventDocumentDroptrue
boolean

Whether to prevent the drop event on the document

required
boolean

Whether the file input is required

transformFiles
(files: File[]) => Promise<File[]>

Function to transform the accepted files to apply transformations

translations
IntlTranslations

The localized messages to use.

validate
(file: File, details: FileValidateDetails) => FileError[] | null

Function to validate a file

Data AttributeValue
[data-scope]file-upload
[data-part]root
[data-disabled]Present when disabled
[data-dragging]Present when in the dragging state

ClearTrigger

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]file-upload
[data-part]clear-trigger
[data-disabled]Present when disabled

Dropzone

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
disableClick
boolean

Whether to disable the click event on the dropzone

Data AttributeValue
[data-scope]file-upload
[data-part]dropzone
[data-invalid]Present when invalid
[data-disabled]Present when disabled
[data-dragging]Present when in the dragging state

HiddenInput

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

ItemDeleteTrigger

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]file-upload
[data-part]item-delete-trigger
[data-disabled]Present when disabled

ItemGroup

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]file-upload
[data-part]item-group
[data-disabled]Present when disabled

ItemName

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]file-upload
[data-part]item-name
[data-disabled]Present when disabled

ItemPreviewImage

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]file-upload
[data-part]item-preview-image
[data-disabled]Present when disabled

ItemPreview

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
type'.*'
string

The file type to match against. Matches all file types by default.

Data AttributeValue
[data-scope]file-upload
[data-part]item-preview
[data-disabled]Present when disabled

Item

PropDefaultType
file
File

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]file-upload
[data-part]item
[data-disabled]Present when disabled

ItemSizeText

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]file-upload
[data-part]item-size-text
[data-disabled]Present when disabled

Label

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]file-upload
[data-part]label
[data-disabled]Present when disabled

RootProvider

PropDefaultType
value
UseFileUploadReturn

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Trigger

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]file-upload
[data-part]trigger
[data-disabled]Present when disabled
[data-invalid]Present when invalid

Prev page

Fieldset

Next page

Floating Panel

Design System Support

Expert design system support from the creators of Ark UI

Get Support