Skip to content
comp0

comp0

Actions

File Trigger

A visible label that asks the browser for files.

When to use it: Use it when a person must choose local files.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

No file selected

File Trigger.tsxtsx
import { useState } from "react";
import { FileTrigger } from "@comp0/react";

export function Example() {
  const [name, setName] = useState("No file selected");

  return (
    <div className="flex flex-col gap-2">
      <FileTrigger
        className="inline-flex w-fit cursor-pointer rounded border border-dashed border-zinc-950/20 px-3 py-2.5 text-base text-zinc-800 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-teal-600 sm:py-2 sm:text-sm dark:border-white/20 dark:text-zinc-100 dark:has-focus-visible:outline-teal-400"
        name="example-file"
        aria-label="Choose a file"
        onChange={(event) => setName(event.currentTarget.files?.[0]?.name ?? "No file selected")}
      >
        Choose a file
      </FileTrigger>
      <p className="text-base text-zinc-600 sm:text-sm dark:text-zinc-400">{name}</p>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. FileTrigger

    Native label that owns the visible trigger words. Owns a DOM element.

  2. file input

    Visually hidden native file input owned by FileTrigger. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Style FileTrigger itself and give it clear words such as Upload photo.

  2. 2

    Add the supporting parts

    Pass native file props such as accept, multiple, name, and onChange directly.

  3. 3

    Make the behavior clear

    The native input stays visually hidden but focusable by default, so keyboard users can reach it.

    Exampletsx
    <FileTrigger name="photo">Upload photo</FileTrigger>

Keyboard

↵
Opens the browser file picker.
Space
Opens the browser file picker.

Forms and accessibility

The hidden input submits selected files using FileTrigger's name prop.

Accessibility checklist

  • Name the visible trigger after the file task.
  • Show accepted file types in visible help when needed.
  • The input ships visually hidden but focusable; do not re-hide it with the hidden attribute.

API reference

Importtsx
import { FileTrigger } from "@comp0/react";

FileTrigger

DOM element

Native label that owns the visible trigger words.

PropTypeDescription
namestringNative form submission name.
acceptstringAccepted file types using native input syntax.
multiplebooleanAllows more than one file to be selected.
onChange(event: ChangeEvent) => voidReceives the native file change event.

file input

DOM element

Visually hidden native file input owned by FileTrigger.

Keep exploring