HextaUI
156Get started
HextaUI

File input (UI SDK): Upload button

A trigger alone opens the system file picker. Without multiple, a new file replaces the current one, and the root’s children can be a function of its state.

No file chosen
"use client"

import { IconUpload } from "@tabler/icons-react"

import { FileInput, FileInputTrigger } from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputButton() {
  return (
    <FileInput accept=".pdf,.doc,.docx">
      {(state) => (
        <div className="flex min-w-0 items-center gap-3">
          <FileInputTrigger>
            <IconUpload aria-hidden="true" />
            {state.value[0] ? "Replace resume" : "Upload resume"}
          </FileInputTrigger>
          <span className="min-w-0 truncate text-sm text-muted-foreground">
            {state.value[0]?.name ?? "No file chosen"}
          </span>
        </div>
      )}
    </FileInput>
  )
}

export { UiSdkFileInputButton }

Add this example

This adds the example as components/examples/ui-sdk-file-input/button.tsx, together with the File input component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-file-input-button.json

To add only the component, follow the File input installation.

Props in this example

The File input props this example sets, from the API reference.

FileInput

PropTypeDefault
accept
string | string[]–

Every prop is in the File input API reference.

More File input examples

See them all, with keyboard support and accessibility notes, on the File input page.

Related components