Skip to content

MultiFileInput

O MultiFileInput é um componente que permite ao usuário selecionar e carregar múltiplos arquivos de forma organizada.



Quando usar:

  • Quando o usuário precisa enviar múltiplos arquivos em um único formulário.
  • Para situações onde é importante visualizar a lista de arquivos selecionados antes de finalizar o envio.
  • Quando o espaço na interface é limitado, mas a seleção de vários arquivos é um requisito.

Quando não usar:

  • Quando apenas um único arquivo precisa ser enviado (nesse caso, um input de arquivo simples é suficiente).
  • Se a lista de arquivos selecionados pode se tornar muito longa, ocupando espaço excessivo na tela e prejudicando a usabilidade.
  • Em interfaces onde a complexidade do componente pode confundir o usuário, especialmente se o envio de múltiplos arquivos não for uma necessidade comum.

Obs:

  • O MultiFileInput é derivado do FileInput e possui todos os atributos e eventos dele.

Uso

js
<CdsMultiFileInput
	variant="green"
	size="md"
	text="Lorem Ipsum"
	@click="multiFileInputClick = true"
/>

Preview

Arraste o arquivo aqui ou pesquise no seu dispositivo
Os arquivos marcados com o asterisco (*) são obrigatórios:
Comprovante de residência *
Guia de encaminhamento
RG
Passaporte *
Os arquivos adicionados serão exibidos aqui
Mostrar log

Props

Nome
Tipo
Default
Opções
Descrição
* documents (required)array -- Especifica os itens que serão exibidos nas opções de arquivos. os itens devem conter, ao menos, os atributos `name` e `required`.
variantstring'green'green
teal
blue
indigo
violet
pink
red
orange
amber
dark
Especifica a principal do componente. Essa cor será aplicada aos detalhes de estilo do componente, bem como em seu botão principal. São 10 variantes: 'teal', 'green', 'blue', 'indigo', 'violet', 'pink', 'red', 'orange', 'amber' e 'dark'.
submitButtonTextstring'Enviar' -- Especifica o texto do botão de submit.
buttonSecondarybooleanfalse -- Especifica se o botão de submit é do tipo secundário.

Eventos

Nome
Descrição
@submit

Última atualização:

Released under the Apache-2.0 License.