Getting Started
InstallationVersioning
Integrations
ESLintTailwind CSS
Theming & Patterns
Composition
Polymorphic ComponentsRender Props
Components
OverviewAccordionAlert Banner
AvatarBreadcrumbsButtonButton GroupCard
Beta
CheckboxCheckbox Group
CollapsibleComboboxDialogDividerDrawerFile Input
Beta
Header BarIconIcon ButtonInline Icon ButtonInline Notification
LinkMenuNumber InputPaginationPassword InputPopoverProgressProgress RingRadioSegmented ControlSelectSide NavSliderStepper
Beta
SwitchSwitch Group
TableTabsTagText Area
Text InputToast NotificationTooltipTree

File Input

1.22.0Beta

The File Input component renders a single-file form field with QDS input styling and file validation support.

import {FileInput} from "@qualcomm-ui/react/file-input"

Overview

The File Input component supports both click-to-browse and drag-and-drop interactions for a single file input. An advanced file upload component is currently in development and will support multi-file lists, async uploads, previews, and rejected-file workflows.

Examples

Simple

The simple <FileInput> bundles all subcomponents together into a single component.

Select a file
<FileInput
  className="w-full max-w-sm"
  label="Upload file"
  placeholder="Select a file"
  startIcon={Upload}
/>

Composite

Use the composite API for explicit control over layout or part props.

Select a PDF
<FileInput.Root
  accept={[".pdf"]}
  className="w-full max-w-sm"
  startIcon={Upload}
>
  <FileInput.Label>Upload agreement</FileInput.Label>
  <FileInput.Control>
    <FileInput.Display placeholder="Select a PDF" />
  </FileInput.Control>
  <FileInput.HiddenInput />
</FileInput.Root>

Sizes

The File Input component supports three size variants: sm, md (default), and lg.

Select a file
Select a file
Select a file
<div className="flex w-full flex-col items-center gap-6">
  <FileInput
    className="w-full max-w-sm"
    label="Upload file (Small)"
    placeholder="Select a file"
    size="sm"
    startIcon={Upload}
  />

  <FileInput
    className="w-full max-w-sm"
    label="Upload file (Medium)"
    placeholder="Select a file"
    size="md"
    startIcon={Upload}
  />

  <FileInput
    className="w-full max-w-sm"
    label="Upload file (Large)"
    placeholder="Select a file"
    size="lg"
    startIcon={Upload}
  />
</div>

Errors

Set invalid and errorText for field-level validation messages. File validation is configured with props such as accept, maxFileSize, and validate.

Select a PDF
Upload a PDF file under 5 MB
<FileInput
  accept={[".pdf"]}
  className="w-full max-w-sm"
  errorText="Upload a PDF file under 5 MB"
  invalid
  label="Tax document"
  maxFileSize={5 * 1024 * 1024}
  placeholder="Select a PDF"
  required
  startIcon={Upload}
/>

Disabled

Set disabled on the root or simple component.

Select a file
<div className="flex w-full max-w-sm flex-col gap-4">
  <Checkbox
    checked={agreed}
    label="I agree to the terms and conditions"
    onCheckedChange={setAgreed}
  />
  <FileInput
    disabled={!agreed}
    label="Upload approval"
    placeholder="Select a file"
    startIcon={Upload}
  />
</div>

API

<FileInput />

The FileInput extends FileInput.Root with the following props:

PropTypeDefault
children
The simple FileInput doesn't support children.
never
clearable
When true, renders a clear button that resets the selected file on click. The button only appears when a file has been selected.
boolean
true
clearTriggerProps
{
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
controlProps
Props applied to the visible input-like control.
{
  children?: ReactNode
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
displayProps
Props applied to the selected file name display.
{
  placeholder?: ReactNode
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
errorText
Optional error message that describes the element when invalid is true.
ReactNode
errorTextProps
Props applied to the error text element.
{
  children?: ReactNode
  icon?:
    | LucideIcon
    | ReactNode
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
hiddenInputProps
Props applied to the hidden file input element.
{
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
label
Optional label describing the file input. This element is automatically associated with the hidden file input for accessibility.
ReactNode
labelProps
Props applied to the label element.
{
  children?: ReactNode
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
placeholder
Text shown when no file has been selected.
ReactNode
children
Type
never
Description
The simple FileInput doesn't support children.
clearable
Type
boolean
Description
When true, renders a clear button that resets the selected file on click. The button only appears when a file has been selected.
clearTriggerProps
Type
{
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
controlProps
Type
{
  children?: ReactNode
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
Description
Props applied to the visible input-like control.
displayProps
Type
{
  placeholder?: ReactNode
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
Description
Props applied to the selected file name display.
errorText
Type
ReactNode
Description
Optional error message that describes the element when invalid is true.
errorTextProps
Type
{
  children?: ReactNode
  icon?:
    | LucideIcon
    | ReactNode
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
Description
Props applied to the error text element.
hiddenInputProps
Type
{
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
Description
Props applied to the hidden file input element.
label
Type
ReactNode
Description
Optional label describing the file input. This element is automatically associated with the hidden file input for accessibility.
labelProps
Type
{
  children?: ReactNode
  render?:
    | Element
    | ((
        props: Props,
      ) => Element)
}
Description
Props applied to the label element.
placeholder
Type
ReactNode
Description
Text shown when no file has been selected.

Composite API

<FileInput.Root>

PropTypeDefault
accept
Accepted file types (e.g., ['image/*', '.pdf']). Supports MIME types, file extensions, or custom validation.
| Record<string, string[]>
| 'image/png'
| 'image/gif'
| 'image/jpeg'
| 'image/svg+xml'
| 'image/webp'
| 'image/avif'
| 'image/heic'
| 'image/bmp'
| 'application/pdf'
| 'application/zip'
| 'application/json'
| 'application/xml'
| 'application/msword'
| 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
| 'application/vnd.ms-excel'
| 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
| 'application/vnd.ms-powerpoint'
| 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
| 'application/rtf'
| 'application/x-rar'
| 'application/x-7z-compressed'
| 'application/x-tar'
| 'application/vnd.microsoft.portable-executable'
| 'text/css'
| 'text/csv'
| 'text/html'
| 'text/markdown'
| 'text/plain'
| 'font/ttf'
| 'font/otf'
| 'font/woff'
| 'font/woff2'
| 'font/eot'
| 'font/svg'
| 'video/mp4'
| 'video/webm'
| 'video/ogg'
| 'video/quicktime'
| 'video/x-msvideo'
| 'audio/mpeg'
| 'audio/ogg'
| 'audio/wav'
| 'audio/webm'
| 'audio/aac'
| 'audio/flac'
| 'audio/x-m4a'
| 'image/*'
| 'audio/*'
| 'video/*'
| 'text/*'
| 'application/*'
| 'font/*'
| AnyString
| Array<
    | 'image/png'
    | 'image/gif'
    | 'image/jpeg'
    | 'image/svg+xml'
    | 'image/webp'
    | 'image/avif'
    | 'image/heic'
    | 'image/bmp'
    | 'application/pdf'
    | 'application/zip'
    | 'application/json'
    | 'application/xml'
    | 'application/msword'
    | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    | 'application/vnd.ms-excel'
    | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    | 'application/vnd.ms-powerpoint'
    | 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
    | 'application/rtf'
    | 'application/x-rar'
    | 'application/x-7z-compressed'
    | 'application/x-tar'
    | 'application/vnd.microsoft.portable-executable'
    | 'text/css'
    | 'text/csv'
    | 'text/html'
    | 'text/markdown'
    | 'text/plain'
    | 'font/ttf'
    | 'font/otf'
    | 'font/woff'
    | 'font/woff2'
    | 'font/eot'
    | 'font/svg'
    | 'video/mp4'
    | 'video/webm'
    | 'video/ogg'
    | 'video/quicktime'
    | 'video/x-msvideo'
    | 'audio/mpeg'
    | 'audio/ogg'
    | 'audio/wav'
    | 'audio/webm'
    | 'audio/aac'
    | 'audio/flac'
    | 'audio/x-m4a'
    | 'image/*'
    | 'audio/*'
    | 'video/*'
    | 'text/*'
    | 'application/*'
    | 'font/*'
    | AnyString
  >
acceptedFiles
Controlled accepted files. Use with onFileChange for controlled state.
Array<File>
allowDrop
Whether to allow drag and drop in the dropzone.
boolean
true
capture
Default camera for capturing media on mobile devices.
| 'user'
| 'environment'
defaultAcceptedFiles
The default accepted files when rendered. Use when you don't need to control the accepted files of the input.
Array<File>
dir
The document's text/writing direction.
'ltr' | 'rtl'
'ltr'
directory
Whether to accept directories. Only supported in webkit browsers.
boolean
disabled
Whether the file input is disabled
boolean
endIcon
lucide icon, positioned at the end of the input field.
| LucideIcon
| ReactNode
getRootNode
A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.
    () =>
    | Node
    | ShadowRoot
    | Document
    ids
    The ids of the elements. Useful for composition.
    Partial<{
      dropzone: string
      errorText: string
      hiddenInput: string
      item: string[]
      itemName: string[]
      itemPreview: string[]
      itemSizeText: string[]
      label: string
      root: string
      trigger: string
    }>
    invalid
    Whether the file input is invalid. When true, applies error styling and shows the error text. Use for form-level validation. Per-file rejection errors are handled automatically.
    boolean
    locale
    The current locale. Based on the BCP 47 definition.
    string
    'en-US'
    maxFiles
    The maximum number of files
    number
    1
    maxFileSize
    Maximum file size in bytes.
    number
    Infinity
    minFileSize
    Minimum file size in bytes.
    number
    0
    name
    Name attribute for the underlying file input.
    string
    onFileAccept
    Function called when the file is accepted
      (details: {
        files: Array<File>
      }) => void
      onFileChange
      Function called when the value changes, whether accepted or rejected
        (details: {
          acceptedFiles: Array<File>
          rejectedFiles: Array<{
            errors: Array<
              | 'TOO_MANY_FILES'
              | 'FILE_INVALID_TYPE'
              | 'FILE_TOO_LARGE'
              | 'FILE_TOO_SMALL'
              | 'FILE_INVALID'
              | 'FILE_EXISTS'
              | AnyString
            >
            file: File
          }>
        }) => void
        onFileReject
        Function called when the file is rejected
          (details: {
            files: Array<{
              errors: Array<
                | 'TOO_MANY_FILES'
                | 'FILE_INVALID_TYPE'
                | 'FILE_TOO_LARGE'
                | 'FILE_TOO_SMALL'
                | 'FILE_INVALID'
                | 'FILE_EXISTS'
                | AnyString
              >
              file: File
            }>
          }) => void
          preventDocumentDrop
          Whether to prevent dropping files outside the dropzone.
          boolean
          true
          render
          Allows you to replace the component's HTML element with a different tag or component. Learn more
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          required
          Whether the file input is required
          boolean
          size
          The size of the input field and its elements. Governs properties like font size, item padding, and icon sizes.
          | 'sm'
          | 'md'
          | 'lg'
          'md'
          startIcon
          lucide icon, positioned at the start of the input field.
          | LucideIcon
          | ReactNode
          transformFiles
          Transforms accepted files asynchronously after validation. Use for compression, resizing, format conversion, or other processing before setting final state.
            (
              files: Array<File>,
            ) => Promise<Array<File>>
            translations
            Localized messages for accessibility labels.
            {
              listLabel?: string
            }
            validate
            Function to validate a file
              (
                file: File,
                details: {
                  acceptedFiles: Array<File>
                  rejectedFiles: Array<{
                    errors: Array<
                      | 'TOO_MANY_FILES'
                      | 'FILE_INVALID_TYPE'
                      | 'FILE_TOO_LARGE'
                      | 'FILE_TOO_SMALL'
                      | 'FILE_INVALID'
                      | 'FILE_EXISTS'
                      | AnyString
                    >
                    file: File
                  }>
                },
              ) => Array<
                | 'TOO_MANY_FILES'
                | 'FILE_INVALID_TYPE'
                | 'FILE_TOO_LARGE'
                | 'FILE_TOO_SMALL'
                | 'FILE_INVALID'
                | 'FILE_EXISTS'
                | AnyString
              >
              accept
              Type
              | Record<string, string[]>
              | 'image/png'
              | 'image/gif'
              | 'image/jpeg'
              | 'image/svg+xml'
              | 'image/webp'
              | 'image/avif'
              | 'image/heic'
              | 'image/bmp'
              | 'application/pdf'
              | 'application/zip'
              | 'application/json'
              | 'application/xml'
              | 'application/msword'
              | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
              | 'application/vnd.ms-excel'
              | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
              | 'application/vnd.ms-powerpoint'
              | 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
              | 'application/rtf'
              | 'application/x-rar'
              | 'application/x-7z-compressed'
              | 'application/x-tar'
              | 'application/vnd.microsoft.portable-executable'
              | 'text/css'
              | 'text/csv'
              | 'text/html'
              | 'text/markdown'
              | 'text/plain'
              | 'font/ttf'
              | 'font/otf'
              | 'font/woff'
              | 'font/woff2'
              | 'font/eot'
              | 'font/svg'
              | 'video/mp4'
              | 'video/webm'
              | 'video/ogg'
              | 'video/quicktime'
              | 'video/x-msvideo'
              | 'audio/mpeg'
              | 'audio/ogg'
              | 'audio/wav'
              | 'audio/webm'
              | 'audio/aac'
              | 'audio/flac'
              | 'audio/x-m4a'
              | 'image/*'
              | 'audio/*'
              | 'video/*'
              | 'text/*'
              | 'application/*'
              | 'font/*'
              | AnyString
              | Array<
                  | 'image/png'
                  | 'image/gif'
                  | 'image/jpeg'
                  | 'image/svg+xml'
                  | 'image/webp'
                  | 'image/avif'
                  | 'image/heic'
                  | 'image/bmp'
                  | 'application/pdf'
                  | 'application/zip'
                  | 'application/json'
                  | 'application/xml'
                  | 'application/msword'
                  | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                  | 'application/vnd.ms-excel'
                  | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                  | 'application/vnd.ms-powerpoint'
                  | 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
                  | 'application/rtf'
                  | 'application/x-rar'
                  | 'application/x-7z-compressed'
                  | 'application/x-tar'
                  | 'application/vnd.microsoft.portable-executable'
                  | 'text/css'
                  | 'text/csv'
                  | 'text/html'
                  | 'text/markdown'
                  | 'text/plain'
                  | 'font/ttf'
                  | 'font/otf'
                  | 'font/woff'
                  | 'font/woff2'
                  | 'font/eot'
                  | 'font/svg'
                  | 'video/mp4'
                  | 'video/webm'
                  | 'video/ogg'
                  | 'video/quicktime'
                  | 'video/x-msvideo'
                  | 'audio/mpeg'
                  | 'audio/ogg'
                  | 'audio/wav'
                  | 'audio/webm'
                  | 'audio/aac'
                  | 'audio/flac'
                  | 'audio/x-m4a'
                  | 'image/*'
                  | 'audio/*'
                  | 'video/*'
                  | 'text/*'
                  | 'application/*'
                  | 'font/*'
                  | AnyString
                >
              Description
              Accepted file types (e.g., ['image/*', '.pdf']). Supports MIME types, file extensions, or custom validation.
              acceptedFiles
              Type
              Array<File>
              Description
              Controlled accepted files. Use with onFileChange for controlled state.
              allowDrop
              Type
              boolean
              Description
              Whether to allow drag and drop in the dropzone.
              capture
              Type
              | 'user'
              | 'environment'
              Description
              Default camera for capturing media on mobile devices.
              defaultAcceptedFiles
              Type
              Array<File>
              Description
              The default accepted files when rendered. Use when you don't need to control the accepted files of the input.
              dir
              Type
              'ltr' | 'rtl'
              Description
              The document's text/writing direction.
              directory
              Type
              boolean
              Description
              Whether to accept directories. Only supported in webkit browsers.
              disabled
              Type
              boolean
              Description
              Whether the file input is disabled
              endIcon
              Type
              | LucideIcon
              | ReactNode
              Description
              lucide icon, positioned at the end of the input field.
              getRootNode
              Type
              () =>
              | Node
              | ShadowRoot
              | Document
              Description
              A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.
                ids
                Type
                Partial<{
                  dropzone: string
                  errorText: string
                  hiddenInput: string
                  item: string[]
                  itemName: string[]
                  itemPreview: string[]
                  itemSizeText: string[]
                  label: string
                  root: string
                  trigger: string
                }>
                Description
                The ids of the elements. Useful for composition.
                invalid
                Type
                boolean
                Description
                Whether the file input is invalid. When true, applies error styling and shows the error text. Use for form-level validation. Per-file rejection errors are handled automatically.
                locale
                Type
                string
                Description
                The current locale. Based on the BCP 47 definition.
                maxFiles
                Type
                number
                Description
                The maximum number of files
                maxFileSize
                Type
                number
                Description
                Maximum file size in bytes.
                minFileSize
                Type
                number
                Description
                Minimum file size in bytes.
                name
                Type
                string
                Description
                Name attribute for the underlying file input.
                onFileAccept
                Type
                (details: {
                  files: Array<File>
                }) => void
                Description
                Function called when the file is accepted
                  onFileChange
                  Type
                  (details: {
                    acceptedFiles: Array<File>
                    rejectedFiles: Array<{
                      errors: Array<
                        | 'TOO_MANY_FILES'
                        | 'FILE_INVALID_TYPE'
                        | 'FILE_TOO_LARGE'
                        | 'FILE_TOO_SMALL'
                        | 'FILE_INVALID'
                        | 'FILE_EXISTS'
                        | AnyString
                      >
                      file: File
                    }>
                  }) => void
                  Description
                  Function called when the value changes, whether accepted or rejected
                    onFileReject
                    Type
                    (details: {
                      files: Array<{
                        errors: Array<
                          | 'TOO_MANY_FILES'
                          | 'FILE_INVALID_TYPE'
                          | 'FILE_TOO_LARGE'
                          | 'FILE_TOO_SMALL'
                          | 'FILE_INVALID'
                          | 'FILE_EXISTS'
                          | AnyString
                        >
                        file: File
                      }>
                    }) => void
                    Description
                    Function called when the file is rejected
                      preventDocumentDrop
                      Type
                      boolean
                      Description
                      Whether to prevent dropping files outside the dropzone.
                      render
                      Type
                      | ReactElement
                      | ((
                          props: object,
                        ) => ReactElement)
                      Description
                      Allows you to replace the component's HTML element with a different tag or component. Learn more
                      required
                      Type
                      boolean
                      Description
                      Whether the file input is required
                      size
                      Type
                      | 'sm'
                      | 'md'
                      | 'lg'
                      Description
                      The size of the input field and its elements. Governs properties like font size, item padding, and icon sizes.
                      startIcon
                      Type
                      | LucideIcon
                      | ReactNode
                      Description
                      lucide icon, positioned at the start of the input field.
                      transformFiles
                      Type
                      (
                        files: Array<File>,
                      ) => Promise<Array<File>>
                      Description
                      Transforms accepted files asynchronously after validation. Use for compression, resizing, format conversion, or other processing before setting final state.
                        translations
                        Type
                        {
                          listLabel?: string
                        }
                        Description
                        Localized messages for accessibility labels.
                        validate
                        Type
                        (
                          file: File,
                          details: {
                            acceptedFiles: Array<File>
                            rejectedFiles: Array<{
                              errors: Array<
                                | 'TOO_MANY_FILES'
                                | 'FILE_INVALID_TYPE'
                                | 'FILE_TOO_LARGE'
                                | 'FILE_TOO_SMALL'
                                | 'FILE_INVALID'
                                | 'FILE_EXISTS'
                                | AnyString
                              >
                              file: File
                            }>
                          },
                        ) => Array<
                          | 'TOO_MANY_FILES'
                          | 'FILE_INVALID_TYPE'
                          | 'FILE_TOO_LARGE'
                          | 'FILE_TOO_SMALL'
                          | 'FILE_INVALID'
                          | 'FILE_EXISTS'
                          | AnyString
                        >
                        Description
                        Function to validate a file

                          <FileInput.Label>

                          PropType
                          children
                          ReactNode
                          render
                          Allows you to replace the component's HTML element with a different tag or component. Learn more
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          children
                          Type
                          ReactNode
                          render
                          Type
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          Description
                          Allows you to replace the component's HTML element with a different tag or component. Learn more

                          <FileInput.Control>

                          PropType
                          children
                          React children prop.
                          ReactNode
                          render
                          Allows you to replace the component's HTML element with a different tag or component. Learn more
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          children
                          Type
                          ReactNode
                          Description
                          React children prop.
                          render
                          Type
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          Description
                          Allows you to replace the component's HTML element with a different tag or component. Learn more

                          <FileInput.ClearTrigger>

                          PropType
                          render
                          Allows you to replace the component's HTML element with a different tag or component. Learn more
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          render
                          Type
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          Description
                          Allows you to replace the component's HTML element with a different tag or component. Learn more

                          <FileInput.Display>

                          PropType
                          placeholder
                          Text shown when no file has been selected.
                          ReactNode
                          render
                          Allows you to replace the component's HTML element with a different tag or component. Learn more
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          placeholder
                          Type
                          ReactNode
                          Description
                          Text shown when no file has been selected.
                          render
                          Type
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          Description
                          Allows you to replace the component's HTML element with a different tag or component. Learn more

                          <FileInput.HiddenInput>

                          PropType
                          render
                          Allows you to replace the component's HTML element with a different tag or component. Learn more
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          render
                          Type
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          Description
                          Allows you to replace the component's HTML element with a different tag or component. Learn more

                          <FileInput.ErrorText>

                          PropType
                          children
                          ReactNode
                          icon
                          Optional error indicator icon.
                          | LucideIcon
                          | ReactNode
                          render
                          Allows you to replace the component's HTML element with a different tag or component. Learn more
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          children
                          Type
                          ReactNode
                          icon
                          Type
                          | LucideIcon
                          | ReactNode
                          Description
                          Optional error indicator icon.
                          render
                          Type
                          | ReactElement
                          | ((
                              props: object,
                            ) => ReactElement)
                          Description
                          Allows you to replace the component's HTML element with a different tag or component. Learn more
                          Last updated on by Ryan Bower
                          Drawer
                          Header Bar
                          Overview
                          Examples
                          Simple
                          Composite
                          Sizes
                          Errors
                          Disabled
                          API
                          <FileInput />
                          Composite API
                          <FileInput.Root>
                          <FileInput.Label>
                          <FileInput.Control>
                          <FileInput.ClearTrigger>
                          <FileInput.Display>
                          <FileInput.HiddenInput>
                          <FileInput.ErrorText>
                          Copyright © 2026 QUALCOMM incorporated. All rights reserved. This site is built with QUI Docs. Head over to the template repository to start building.