Components/Inputs/FileInput

FileInput

Inputs

File picker with drag-and-drop zone and MIME type filtering.

Wraps a hidden native file input (type file) with a button-styled trigger. Shows the selected filename or file count. Optional clearable prop adds a dismiss button.

Usage

import { FileInput } from "nosible-ux"

export default function Example() {
  return (
    <FileInput
      label="Upload signals CSV"
      accept=".csv"
      placeholder="Select file..."
    />
  )
}

Examples

Multiple files

Upload data files

Select files...

Variants

Default

Select file…

Filled

Select file…

Outline

Select file…

Accessibility

The visible trigger is a button element that programmatically clicks the hidden input. The native file dialog is opened by the browser. aria-label is derived from label when provided.

Props

Name	Type	Default	Description
`accept`	`string \| undefined`	—	Comma-separated list of accepted MIME types or extensions.
`clearable`	`boolean \| undefined`	`false`	When true, shows a clear button after a file is selected.
`description`	`string \| undefined`	—	Helper text below the trigger. Suppressed when `error` is present.
`disabled`	`boolean \| undefined`	`false`	Whether the trigger is disabled.
`error`	`string \| undefined`	—	Validation error. Renders Critical Red text.
`label`	`string \| undefined`	—	Label rendered ALL-CAPS in Space Mono above the trigger.
`multiple`	`boolean \| undefined`	`false`	Whether the user can pick multiple files.
`onChange`	`((files: File[]) => void) \| undefined`	—	Called when the selection changes. Receives the selected File array.
`placeholder`	`string \| undefined`	`"Select file…"`	Placeholder text shown when no file is selected.
`required`	`boolean \| undefined`	—	Required field flag — adds visual asterisk.
`size`	`"sm" \| "md" \| "lg" \| undefined`	`"md"`	Visual size.
`variant`	`"default" \| "filled" \| "outline" \| undefined`	`"default"`	Visual variant.

← All Components Getting Started →