104Get started
HextaUI

Input: File

type="file" gets the same frame, with the browser’s button restyled as plain text.

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function InputFile() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="input-file">Avatar</Label>
      <Input id="input-file" type="file" accept="image/*" />
    </div>
  )
}

Add this example

This adds the example as components/examples/input/file.tsx, together with the Input component and the HextaUI theme tokens it needs.

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

To add only the component, follow the Input installation.

Props in this example

The Input props this example sets, from the API reference.

Input

PropTypeDefault
type
string"text"

Every prop is in the Input API reference.

More Input examples

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

Related components