FileInput

File input component with support for multiple files, file type filtering, and various styles.

Import

import { FileInput } from 'asterui'

Examples

Basic FileInput

Simple file input.

</>

import { FileInput } from 'asterui'

function App() {
  return (
      <FileInput />
    )
}

export default App

Accept Types

File input that accepts only specific file types.

</>

Images only

PDF files only

Images and PDFs

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <div>
          <label className="block text-sm font-medium mb-2">Images only</label>
          <FileInput accept="image/*" />
        </div>
        <div>
          <label className="block text-sm font-medium mb-2">PDF files only</label>
          <FileInput accept=".pdf" />
        </div>
        <div>
          <label className="block text-sm font-medium mb-2">Images and PDFs</label>
          <FileInput accept="image/*,.pdf" />
        </div>
      </Space>
    )
}

export default App

Multiple Files

Allow selecting multiple files.

</>

import { FileInput } from 'asterui'

function App() {
  return (
      <FileInput multiple />
    )
}

export default App

Sizes

Different file input sizes.

</>

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <FileInput size="xs" />
        <FileInput size="sm" />
        <FileInput size="md" />
        <FileInput size="lg" />
      </Space>
    )
}

export default App

Colors

Different color variants.

</>

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <FileInput color="primary" />
        <FileInput color="secondary" />
        <FileInput color="accent" />
        <FileInput color="success" />
        <FileInput color="warning" />
        <FileInput color="error" />
      </Space>
    )
}

export default App

Styles

Bordered and ghost styles.

</>

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <FileInput bordered color="primary" />
        <FileInput ghost color="secondary" />
      </Space>
    )
}

export default App

API

FileInput

Property	Description	Type	Default
accept	File types to accept	string	-
multiple	Allow multiple file selection	boolean	false
onChange	Change handler	(e: ChangeEvent) => void	-
disabled	Disable the input	boolean	false
size	Input size	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Input color	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
bordered	Show border	boolean	false
ghost	Ghost style	boolean	false
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

Accessibility

• Uses native <input type="file"> for full keyboard support
• Always pair with a descriptive <label> for accessibility
• The accept attribute helps users select appropriate files