Início Boas práticas Tema Idiomas e RTL App e cabeçalho Layout Tipografia Abas Menu e âncora Dropdown e popover Command e toggles Botão Campos Seleção e valores Combobox e menções Datas e calendário Árvore e cascata Transfer Upload Filtros Tabela Planilha KPI e estatística Badge e tag Listas e detalhes Gráficos Imagem e carrossel Ícones Diagramas Alertas e estados Progresso e passos Diálogo e toast Drawer e notificação Utilitários Overview Work queue Report Report com htmx Form / request Tabela administrativa Página de detalhe Formulário em diálogo Gráfico com dados do servidor Buscar… llms.txt Tema Tema Restaurar Retos (4 / 2)Padrão (8 / 6)Arredondados (16 / 10) ConfortávelCompacta ClaroEscuroAutomático Copiar prompt Copiar snippet Prompt: para as instruções de um agente. Snippet: direto no templates/base.html. v0.11.0 Text-like input with label, help and error. Camposlabel, help e error embutidos. Participam de form e FormData. AdministrativoComercial <ab-grid cols="2"> <ab-input label="Nome" name="nome" required placeholder="Como no contrato"></ab-input> <ab-input label="E-mail" name="email" type="email" help="Enviaremos o recibo para cá"></ab-input> <ab-input label="CNPJ" name="cnpj" value="12.345.678/0001" error="CNPJ incompleto"></ab-input> <ab-select label="Centro de custo" name="cc" placeholder="Selecione"> <option value="adm">Administrativo</option><option value="com">Comercial</option> </ab-select> <ab-input label="Valor" name="valor" type="number" step="0.01" icon="currency-circle-dollar"></ab-input> <ab-date-range label="Período" name="periodo" presets="7d,30d,month"></ab-date-range> </ab-grid> <ab-input label="Observações" name="obs" type="textarea" style="margin-top: var(--ab-space-4)"></ab-input> Formulário com envioErros aparecem no próprio campo; o sucesso vira toast.

LimparEnviar

<ab-card heading="Solicitar reembolso" style="max-width:32rem"> <form id="f"> <ab-stack> <ab-input label="Descrição" name="descricao" required></ab-input> <ab-input label="Valor" name="valor" type="number" required></ab-input> <ab-cluster justify="end"><ab-button type="reset" variant="ghost">Limpar</ab-button><ab-button type="submit" variant="primary">Enviar</ab-button></ab-cluster> </ab-stack> </form> </ab-card> <script type="module"> const f = document.getElementById("f"); f.addEventListener("submit", (e) => { e.preventDefault(); const data = Object.fromEntries(new FormData(f)); const valor = f.querySelector('[name="valor"]'); valor.error = Number(data.valor) > 0 ? "" : "Informe um valor maior que zero"; if (!valor.error) abToast(`Enviado: ${data.descricao}`); }); </script> Rótulo para qualquer controleab-field dá rótulo, ajuda e erro com o mesmo espaçamento dos outros campos a um controle que não é do Design System. <ab-field label="Arquivo de retorno" help="Gerado pelo banco no fim do dia."> <input type="file" aria-label="Arquivo de retorno"> </ab-field> APIAtributos, propriedades, métodos, eventos e slots de cada tag. <ab-input>Text-like input with label, help and error. Participates in <form> and FormData. <ab-select>Select with label. Options come from child <option> elements or the options property. <ab-date-range>Date range (De / Até) with quick presets. Value is { from, to } as "YYYY-MM-DD" (local dates). In a <form> it submits <name>_from and <name>_to. <ab-field>Label + help + error around any control you provide (native or custom).