Agrupada e arrastar
Envelopes separados pela etapa do fluxo. Cada grupo abre e fecha pelo cabeçalho, mostra quantos itens tem e aceita cards arrastados de outro grupo ou reordenados dentro dele.
Fluxo de envelopes
onMove recebe o id, o grupo de origem, o de destino e a posição final. O destino fica marcado enquanto o card passa por cima. Pelo teclado, a alça reordena dentro do grupo (Espaço e setas) e o menu de cada card move para outra etapa.
- Aditivo contratual nº 3DOC-2026-001187
- Assinaturas
- 0 de 1
- Prazo
- —
Rascunho
- Contrato de prestação de serviçosDOC-2026-001184
- Assinaturas
- 2 de 3
- Prazo
- 24/10/2026
Em assinatura - Termo de adesão · Plano EmpresarialDOC-2026-001185
- Assinaturas
- 0 de 2
- Prazo
- 30/10/2026
Enviado - Contrato de locação · Sala 402DOC-2026-001190
- Assinaturas
- 1 de 3
- Prazo
- 28/10/2026
Em assinatura
- Procuração para representaçãoDOC-2026-001186
- Assinaturas
- 2 de 2
- Prazo
- 12/10/2026
Concluído - Política de uso de dadosDOC-2026-001191
- Assinaturas
- 4 de 4
- Prazo
- 02/10/2026
Concluído
Arraste um envelope para outra etapa.
Uso
<List
aria-label="Envelopes por etapa"
layout="grouped"
groups={[{ id: "draft", label: "Rascunhos", tone: "neutral" }, …]}
items={items}
enableDnD
onMove={(id, from, to, toIndex) => commit(id, to, toIndex)}
/>