Is the ai2 File Input compatible with shadcn/ui?

Yes. It installs through the standard shadcn registry format and only depends on class-variance-authority, lucide-react and the cn util, so it drops into any shadcn/ui project. shadcn/ui has no dedicated file input; this fills that gap with the ai2 axis contract.

Is the file input accessible?

The native input element stays in the DOM, visually hidden with sr-only, so keyboard focus, the file dialog and screen reader semantics are the browser's own. Focus-visible, disabled and aria-invalid states are lifted to the visible surface. Provide an accessible name via aria-label, a Label or a Field, because the visible text is placeholder or file name only.

How do I install the ai2 File Input?

Run npx shadcn add @ai2/file-input with the ai2 registry configured in components.json. An MCP agent can run the same install for you, or you can copy the source from this page manually.

Can an AI agent install and use this component?

Yes. The registry item ships agent-readable metadata describing the variants, sizes, tones and states, and the page provides a copy prompt. Point the shadcn MCP server at the @ai2 registry and the agent can search, inspect and install it on its own.

How do I read the selected files?

Exactly like a native input: pass onChange and read event.target.files. All native file input props pass through, including multiple and accept. The component only manages the displayed text, not your data.

How does clearing work?

When clearable is true (the default) a clear button appears after a file is selected. Clicking it resets the input value and dispatches a bubbling change event, so onChange handlers and form libraries observe the reset.

Can I use a remixicon instead of the lucide Paperclip?

Yes. The icon prop accepts any React node. The component sizes both lucide svg icons and remixicon elements, so icon={ } works without extra classes.

What is the difference from Input with type="file"?

The ai2 Input styles the browser's default file button but keeps the native layout. FileInput replaces the whole surface: custom icon, placeholder, selected file name, multiple-file count and a clear button, with data-state hooks for styling.

Does it support drag and drop?

No. It is a click-to-pick control built around the native file dialog. Dropping files onto it does not select them; if you need a dropzone, build one around the same hidden-input pattern.

File Input

A styled file picker over a hidden native input. 3 variants, 3 sizes, 3 tones, a leading icon, selected file name and an optional clear button.

form

A free styled version is available

Choose a fileAttach a logoPNG or SVG, max 2 MB

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

export default function FileInputDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <FileInput aria-label="Upload attachment" />
      <FileInput
        variant="soft"
        size="sm"
        placeholder="Attach a logo"
        aria-label="Upload logo"
      />
      <FileInput
        tone="danger"
        placeholder="PNG or SVG, max 2 MB"
        aria-label="Upload avatar"
        aria-invalid="true"
      />
    </div>
  )
}

Installation

Run the following command

npx shadcn@latest add @ai2/file-input

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install class-variance-authority@^0.7.1 lucide-react@^1.23.0

Add the cn util

lib/utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

/* Adds a source-attribution ref param to a URL (the inspiration exports mark their
   outbound links with an ai2.design attribution). An invalid URL is returned as is.

   This file is SHOWN TO THE CONSUMER: the docs component pages render the source of
   `cn` in a code block, so a Turkish comment here would reach every one of those
   pages. Keep it English. */
export function withRef(url: string, ref = "ai2.design"): string {
  try {
    const u = new URL(url)
    u.searchParams.set("ref", ref)
    return u.toString()
  } catch {
    return url
  }
}

Copy the source code

components/ui/file-input.tsx

"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Paperclip, X } from "lucide-react"

import { cn } from "@/lib/utils"

const fileInputVariants = cva(
  "flex w-full min-w-0 cursor-pointer items-center outline-none transition-[color,box-shadow] duration-(--motion-fast) has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-ring/50 has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 has-[input[aria-invalid=true]]:border-danger [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none",
  {
    variants: {
      variant: {
        outline: "border border-field-border bg-transparent shadow-xs dark:bg-input/30",
        soft: "border border-transparent bg-surface-3 dark:bg-input/50",
        ghost: "border border-transparent bg-transparent hover:bg-surface-3",
      },
      size: {
        sm: "min-h-8 gap-1.5 rounded-md px-2.5 py-1.5 text-sm",
        md: "min-h-9 gap-2 rounded-lg px-3 py-1.5 text-sm",
        lg: "min-h-10 gap-2 rounded-lg px-3.5 py-2 text-base md:text-sm",
      },
      tone: {
        neutral: "",
        success:
          "border-success has-[input:focus-visible]:border-success has-[input:focus-visible]:ring-success/20 dark:has-[input:focus-visible]:ring-success/40",
        danger:
          "border-danger has-[input:focus-visible]:border-danger has-[input:focus-visible]:ring-danger/20 dark:has-[input:focus-visible]:ring-danger/40",
      },
    },
    defaultVariants: { variant: "outline", size: "md", tone: "neutral" },
  }
)

interface FileInputProps
  extends Omit<React.ComponentProps<"input">, "size" | "type">,
    VariantProps<typeof fileInputVariants> {
  /** Text shown before a file is picked. */
  placeholder?: string
  /** Leading icon; defaults to a lucide Paperclip. Accepts remixicon `<i>` too. */
  icon?: React.ReactNode
  /** Show a clear button once a file is selected. */
  clearable?: boolean
}

function FileInput({
  className,
  variant,
  size,
  tone,
  placeholder = "Choose a file",
  icon,
  clearable = true,
  onChange,
  ...props
}: FileInputProps) {
  const inputRef = React.useRef<HTMLInputElement>(null)
  const [names, setNames] = React.useState<string[]>([])

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNames(Array.from(event.target.files ?? []).map((f) => f.name))
    onChange?.(event)
  }

  const clear = (event: React.MouseEvent<HTMLButtonElement>) => {
    // A button inside a label re-triggers the file dialog unless defaulted out.
    event.preventDefault()
    event.stopPropagation()
    const input = inputRef.current
    if (!input) return
    input.value = ""
    setNames([])
    input.dispatchEvent(new Event("change", { bubbles: true }))
  }

  const selected = names.length > 0
  const text = selected
    ? names.length > 1
      ? `${names.length} files`
      : names[0]
    : placeholder

  return (
    <label
      data-slot="file-input"
      data-variant={variant ?? "outline"}
      data-tone={tone ?? "neutral"}
      data-state={selected ? "selected" : "empty"}
      className={cn(fileInputVariants({ variant, size, tone, className }))}
    >
      <input
        ref={inputRef}
        type="file"
        data-slot="file-input-control"
        className="sr-only"
        onChange={handleChange}
        {...props}
      />
      <span
        data-slot="file-input-icon"
        aria-hidden="true"
        className="flex shrink-0 items-center justify-center text-muted-foreground"
      >
        {icon ?? <Paperclip />}
      </span>
      <span
        data-slot="file-input-text"
        className={cn("flex-1 [overflow-wrap:anywhere]", !selected && "text-muted-foreground")}
      >
        {text}
      </span>
      {clearable && selected && (
        <button
          type="button"
          data-slot="file-input-clear"
          aria-label="Clear selected file"
          onClick={clear}
          className="relative flex shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none transition-colors duration-(--motion-fast) after:absolute after:-inset-2 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
        >
          <X />
        </button>
      )}
    </label>
  )
}

export { FileInput, fileInputVariants, type FileInputProps }

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the surface colors will be missing.

Usage

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

<FileInput aria-label="Upload attachment" />

All three axes are optional. Omit them and you get the outline medium neutral picker. Native file input props such as multiple, accept and disabled pass through to the hidden input.

Examples

Variants

Outline (default)SoftGhost

Pick a file to see the selected state: the placeholder swaps to the file name and a clear button appears at the trailing edge.

Sizes

SmallMediumLarge

Tones

Neutral (default)Looks goodPNG or SVG, max 2 MB

The tone axis colors the border and focus ring with the success or danger token, giving controlled validation feedback without touching aria-invalid.

Invalid state

RequiredRequired

Set aria-invalid on validation errors. It lands on the hidden input and the danger border lifts to the visible surface automatically.

Disabled

DisabledDisabled soft

disabled lands on the hidden input; the visible surface halves its opacity and stops receiving pointer events via has-[] selectors.

Custom icon

Upload a document

The icon prop replaces the default Paperclip with any node. Remixicon works too: icon={<i className="ri-image-line" />} renders at the right size without extra classes.

Multiple and accept

Choose filesChoose an image

With multiple, selecting more than one file shows a count such as 3 files instead of a name. accept filters the file dialog to matching types.

Props

FileInput also accepts every native <input> prop except size (repurposed for the size axis) and type (always file). They are forwarded to the hidden native input.

Prop	Type	Default	Description
`variant`	`"outline" \| "soft" \| "ghost"`	`"outline"`	Visual style of the picker surface.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Height, padding, radius and typography scale. Replaces the native size attribute.
`tone`	`"neutral" \| "success" \| "danger"`	`"neutral"`	Semantic validation color: success and danger recolor the border and focus ring.
`placeholder`	`string`	`"Choose a file"`	Text shown before a file is picked.
`icon`	`React.ReactNode`	`lucide Paperclip`	Leading icon. Accepts any node, including a remixicon <i> element; sizing for both is built in.
`clearable`	`boolean`	`true`	Shows a clear button once a file is selected. Clearing dispatches a bubbling change event.

ai2 File Input: a styled react file picker with variants and tones

The ai2 File Input is a shadcn-compatible file picker component for React, styled with Tailwind CSS v4 on the shared ai2 tokens. It hides the native file input under a custom surface and follows the same axis contract as the ai2 Input: 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger), plus a leading icon, a placeholder, the selected file name and an optional clear button.

Because it ships through the shadcn registry format, you install it with one CLI command, an MCP agent, or a copy-paste, and the source lands in your own project. You own the file; there is no runtime dependency on ai2 itself. The live example above is the exact component you get.

What is the ai2 File Input?

It is a styled <label> wrapping a visually hidden native <input type="file">, driven by fileInputVariants, an exported cva definition with a variant axis (outline, soft, ghost), a size axis (sm, md, lg) and a tone axis (neutral, success, danger). Clicking anywhere on the surface opens the file dialog because the label owns the input.

The component tracks selection itself: before a pick it shows the placeholder, after a pick it shows the file name (or a "N files" count with multiple), and it exposes data-state="empty" or data-state="selected" for CSS hooks. Focus, disabled and aria-invalid styles lift from the hidden input to the visible surface via has-[] selectors.

Why use it

Native input, custom surface: The real file input stays in the DOM (visually hidden), so forms, FormData, the accept and multiple attributes and screen reader semantics keep working while the visible surface matches your theme.
Same axes as the ai2 Input: 3 variants times 3 sizes times 3 tones from one cva definition, matching the Input contract, so file pickers sit visually flush inside any ai2 form.
Selection feedback built in: Placeholder before a pick, the file name after, a file count for multiple selections, and a clear button that resets the input and dispatches a bubbling change event.
Icon flexibility: The leading icon defaults to a lucide Paperclip and accepts any node, including remixicon <i> elements; sizing rules for both svg and i children are in the component.
Agent-readable metadata: The registry item states the variant matrix and states in plain words, so an MCP agent can pick the right combination without reading the source.

Features

shadcn registry install: One command adds the component and the @ai2/tokens theme to your project.
3 variants, 3 sizes, 3 tones: outline (default), soft and ghost, each in sm, md and lg with matched height, padding, radius and typography, plus neutral, success and danger tones for validation color.
State lifted from the hidden input: focus-visible ring, disabled opacity and aria-invalid danger border all read from the native input via has-[] selectors, so the visible surface always reflects the real control.
Clear button with a real change event: Clearing resets the input value and dispatches a bubbling change event, so form libraries listening on the input stay in sync.
Multiple file count: With the multiple attribute, picking more than one file shows a compact count such as 3 files instead of a truncated name list.
Data attributes for styling: The root exposes data-slot="file-input", data-variant, data-tone and data-state, and each part has its own data-slot, so you can restyle from CSS without forking.

Production tips

Constrain uploads with accept: Pass the native accept attribute (for example image/*) so the file dialog filters to the right types; validation still belongs on the server.
Use tone or aria-invalid for errors: aria-invalid flips the border to the danger color on its own; the danger tone also recolors the focus ring. Use aria-invalid for form-library errors and tone for controlled validation looks.
Give it an accessible name: The visible text is the placeholder or the picked file name, not a label. Pair it with an ai2 Label or Field, or set aria-label on the component.
Keep clearable for optional uploads: The clear button is the only built-in way for users to unselect a file without picking another one. Only set clearable={false} when an upload is mandatory.
Read files from the change event: The component does not hold a files prop; read event.target.files in onChange exactly as with a bare native input.

Works with the rest of ai2

Wrap it in an ai2 Field to get label, description and error placement for free, or pair it with an ai2 Label directly, and submit with an ai2 Button.

It shares the variant, size and tone language with the Input and Textarea, so mixed forms stay visually consistent. If you only need the browser default file button restyled, the Input also styles a bare type="file".