FileInput

Componente de entrada de archivo con soporte para múltiples archivos, filtrado de tipos de archivo y varios estilos.

Importar

import { FileInput } from 'asterui'

Ejemplos

FileInput Básico

Entrada de archivo simple.

</>

import { FileInput } from 'asterui'

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

export default App

Tipos Aceptados

Entrada de archivo que acepta solo tipos de archivo específicos.

</>

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

Múltiples Archivos

Permite seleccionar múltiples archivos.

</>

import { FileInput } from 'asterui'

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

export default App

Tamaños

Diferentes tamaños de entrada de archivo.

</>

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

Colores

Diferentes variantes de color.

</>

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

Estilos

Estilos con borde y ghost.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
accept	Tipos de archivo a aceptar	string	-
multiple	Permite selección de múltiples archivos	boolean	false
onChange	Manejador de cambio	(e: ChangeEvent) => void	-
disabled	Deshabilitar la entrada	boolean	false
size	Tamaño de entrada	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Color de entrada	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
bordered	Mostrar borde	boolean	false
ghost	Estilo ghost	boolean	false
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa <input type="file"> nativo para soporte completo de teclado
• Siempre empareja con una <label> descriptiva para accesibilidad
• El atributo accept ayuda a los usuarios a seleccionar archivos apropiados