BackchannelUI
  1. Docs
  2. components
  3. FileTrigger

FileTrigger

A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.

Docs

FileTrigger extends the functionality of the standard file input element by working with a pressable child such as a Button to create accessible file inputs that can be style as needed.

Installation

Install the button.tsx component here

Import FileTrigger from react-aria-components

import { FileTrigger } from "react-aria-components"

Composed Components

A FileTrigger wraps around a pressable child such as a button, and includes a visually hidden input element that allows the user to select files from their device.

Button

A button allows a user to perform an action, with mouse, touch, and keyboard interactions.

Button

Input

A file input can be created with an <Input type=“file”> element, but this supports limited styling options and may not integrate well with the overall design of a website or application. To overcome this, FileTrigger extends the functionality of the standard file input element by working with a pressable child such as a Button to create accessible file inputs that can be style as needed.

ButtonToggle Button