Cadastro em etapas

Cadastro em três etapas com Stepper, validação em cada etapa, resumo de erros com link para cada campo, etapa de revisão com links de edição e tela de sucesso.

Feito comCopy Anchor Link

• Stepper
• Card
• Avatar
• Field
• Input
• PasswordInput
• InputGroup
• RadioGroup
• NativeSelect
• Checkbox
• ErrorSummary
• DataList
• Button
• Heading
• Text
• Link

ComportamentoCopy Anchor Link

• Painel da marca. A partir de 860px, um painel na cor da marca fica ao lado do formulário, com os motivos para se cadastrar e o depoimento de um cliente; em telas mais estreitas, o formulário fica sozinho, com o logo acima.
• Validação por etapa. Continuar confere só a etapa atual. Os erros aparecem depois do primeiro Continuar naquela etapa e se atualizam enquanto você digita, então um campo corrigido deixa de ficar vermelho na hora.
• Resumo de erros. Um Continuar com problemas mostra um ErrorSummary com um link por problema; cada link leva o foco ao campo. A etapa fica vermelha no Stepper até ser corrigida.
• Endereço a partir do nome. O endereço do espaço acompanha o nome ("Café Serra Azul" → cafe-serra-azul) até você editá-lo.
• Revisão. A última etapa lista tudo o que foi preenchido, com um botão Editar por seção que volta para ela. Os valores ficam guardados quando você anda entre as etapas.
• Sucesso. Criar o espaço troca o formulário por uma confirmação que repete o e-mail.

AcessibilidadeCopy Anchor Link

• Ao mudar de etapa, o foco vai para o título dela; num Continuar com erros, vai para o resumo, então o leitor de tela começa no lugar certo.
• O Stepper é uma lista ordenada; a etapa atual tem aria-current="step" e as concluídas dizem "concluída".
• Cada erro também aparece no FieldError do campo, ligado ao input, e o título do resumo diz quantos problemas há.
• O formulário usa noValidate, para os balões do navegador não competirem com o resumo; os valores de autoComplete deixam gerenciadores de senha preencherem a etapa da conta.