Dropzone
Área de upload de arquivos com drag-and-drop. Borda dashed, ícone de link, botão de procurar. Lista de arquivos com nome, tamanho e botão remover. Dark mode automático via tokens semânticos.
Exemplos
O primeiro exemplo é interativo — clique para selecionar ou arraste arquivos. O segundo mostra o estado preenchido.
Carregando exemplo...
Propriedades
Classes disponíveis para configurar o dropzone.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.dropzone-group | classe | — | Wrapper flex column. Adicione .has-files quando houver arquivos. |
.dropzone-label | classe | — | Label do campo (14px medium). |
.dropzone | classe | — | Área de drop (borda dashed, padding 32px). |
.dropzone-icon | classe | — | Ícone circular (32x32, borda, ícone accent). |
.dropzone-title | classe | — | Título "Anexar arquivos" (p3 medium). |
.dropzone-description | classe | — | Descrição (p5 regular, secondary). |
.dropzone-btn | classe | — | Botão "Procurar arquivos" (outlined small). |
.dropzone-input | classe | — | Input file oculto. |
.dropzone-files | classe | — | Container da lista de arquivos. |
.dropzone-file | classe | — | Item de arquivo (nome, tamanho, botão remover). |
.dropzone-file-remove | classe | — | Botão remover arquivo (32x32, ícone delete). |
.has-files | classe | — | Adicionar no .dropzone-group quando há arquivos. |
.is-drag-over | classe | — | Estado de drag-over na área de drop. |
Código
Snippets prontos para copiar e usar.
Dropzone vazio
html
<div class="dropzone-group">
<label class="dropzone-label">Label</label>
<div class="dropzone">
<input type="file" class="dropzone-input" multiple>
<div class="dropzone-content">
<span class="dropzone-icon"><!-- SVG link --></span>
<span class="dropzone-title">Anexar arquivos</span>
<span class="dropzone-description">Procure os arquivos ou arraste e solte aqui.</span>
</div>
<button class="dropzone-btn">Procurar arquivos</button>
</div>
</div>Com arquivos
html
<div class="dropzone-group has-files">
<label class="dropzone-label">Label</label>
<div class="dropzone">
<!-- conteúdo do dropzone -->
</div>
<div class="dropzone-files">
<div class="dropzone-file">
<div class="dropzone-file-info">
<span class="dropzone-file-name">arquivo.pdf</span>
<span class="dropzone-file-size">2.4mb</span>
</div>
<button class="dropzone-file-remove"><!-- SVG delete --></button>
</div>
</div>
</div>Tokens utilizados
Variáveis semânticas aplicadas ao componente.
| Token | Uso |
|---|---|
--surface-base-neutral-container-default | Background da área e arquivos |
--surface-base-neutral-container-hover | Background no hover/drag-over |
--border-base-neutral-strong | Borda dashed da área de drop |
--border-base-neutral-default | Borda do botão, ícone e arquivos |
--text-base-neutral-default | Título e nome do arquivo |
--text-base-neutral-secondary | Descrição |
--text-base-neutral-subtle | Tamanho do arquivo |
--accent-300 | Cor do ícone de link |
--radius-default | Border-radius (6px) |
--spacing-7 | Padding da área de drop (32px) |
--spacing-3 | Gaps internos (12px) |