FileInput

Componente de entrada de arquivo com suporte para múltiplos arquivos, filtragem de tipo de arquivo e vários estilos.

Importação

import { FileInput } from 'asterui'

Exemplos

FileInput Básico

Entrada de arquivo simples.

</>

import { FileInput } from 'asterui'

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

export default App

Tipos Aceitos

Entrada de arquivo que aceita apenas tipos de arquivo 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últiplos Arquivos

Permitir seleção de múltiplos arquivos.

</>

import { FileInput } from 'asterui'

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

export default App

Tamanhos

Diferentes tamanhos de entrada de arquivo.

</>

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

Cores

Diferentes variantes de cor.

</>

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 com borda e 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

Propriedade	Descrição	Tipo	Padrão
accept	Tipos de arquivo a aceitar	string	-
multiple	Permitir seleção de múltiplos arquivos	boolean	false
onChange	Manipulador de mudança	(e: ChangeEvent) => void	-
disabled	Desabilitar a entrada	boolean	false
size	Tamanho da entrada	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Cor da entrada	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
bordered	Mostrar borda	boolean	false
ghost	Estilo ghost	boolean	false
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Usa <input type="file"> nativo para suporte completo de teclado
• Sempre combine com um <label> descritivo para acessibilidade
• O atributo accept ajuda os usuários a selecionar arquivos apropriados