VOLT DESIGN SYSTEM
Bloco 3: Formulários
← Retornar ao Hub do Showcase
Bloco Canônico 3

Formulários e Controles Interativos

Especificação de controles de entrada para captação de leads, parametrização de agentes, formulários administrativos e fluxos operacionais. Projetado para alto contraste em fundo Dark Obsidian e feedback claro de validação defensiva.

1. Campos de Texto, E-mail e Textarea

Utilize a classe .field-group envolvendo o rótulo (.volt-label), o campo de entrada e o texto de apoio ou erro.

Nome registrado para identificação de sessões e auditoria.
Canal prioritário para notificações operacionais.
Texto estruturado sem restrição de tamanho. Suporta rolagem vertical nativa.

2. Seletores Dropdown e Interruptores (Switches)

Controles para escolhas discretas e ativação ou desativação de módulos operacionais em tempo real.

Selecione o subsistema destinatário do despacho.

3. Estados de Validação Defensiva e Feedback de Erro

Apresentação de campos inválidos através da classe .is-invalid ou .volt-input-error, acompanhados da mensagem descritiva .volt-field-error.

O domínio informado contém caracteres ilegais. Utilize apenas letras minúsculas, números e hífens.
A porta deve estar compreendida no intervalo numérico entre 1024 e 65535.

4. Contrato de Integração Downstream (Demanda 2308)

Esta marcação canônica é diretamente consumida pelo gerador de páginas declarativas do Volt Lead no partial ERB app/views/components/_forms.erb.

<div class="field-group <%= 'is-invalid' if field.has_error? %>"> <label for="<%= field.id %>" class="volt-label"> <%= field.label %> <%= '<span class="text-volt-cyan">*</span>' if field.required? %> </label> <input type="<%= field.type %>" id="<%= field.id %>" name="<%= field.name %>" class="volt-input <%= 'volt-input-error' if field.has_error? %>" placeholder="<%= field.placeholder %>" value="<%= field.value %>"> <% if field.has_error? %> <span class="volt-field-error"><%= field.error_message %></span> <% elsif field.help_text.present? %> <span class="volt-field-help"><%= field.help_text %></span> <% end %> </div>