Introdução

Um controle de entrada fundamental projetado para gerenciar formulários de forma limpa e acessível. Ele agrega rótulos de entrada, textos de ajuda contextuais, estados de validação de erro dinâmicos e verificação de regras baseadas em JS personalizadas em uma interface coesa e amigável para desenvolvedores.

O componente Field está totalmente integrado como um bloco interativo field no Page Builder. Isso permite que criadores de conteúdo e designers redigem campos, coloquem entradas de formulário HTML personalizadas e forneçam lógica de validação instantânea do lado do cliente diretamente do Sveltia CMS sem escrever código de layout repetitivo.

Uso

Estes exemplos ilustram como os editores de conteúdo vinculam e configuram estruturas de campos de formulário.

1. Campo de Entrada Padrão

Um campo de texto padrão com um rótulo companheiro, um espaço reservado e um texto de ajuda descritivo localizado diretamente abaixo do elemento de entrada.

{
  "type": "field",
  "label": "Username",
  "placeholder": "e.g. jules_architect",
  "helperText": "Choose a unique public username.",
  "name": "username",
  "interactive": true
}

2. Entrada Dinâmica com Validação do Lado do Cliente

Utiliza lógica de validação personalizada. Quando o usuário insere menos de 5 caracteres ou pula o símbolo @, uma mensagem de erro é exibida e anunciada automaticamente de forma dinâmica.

{
  "type": "field",
  "label": "Email Address",
  "placeholder": "architect@domain.com",
  "defaultValue": "invalid-email",
  "validator": "(value) => value.includes('@') || 'Must be a valid email containing \'@\''",
  "name": "email",
  "interactive": true
}

3. Campos de Opção Obrigatórios e Desabilitados

Demonstra estilos de campos de formulário sob estados de bloco HTML padrão. Isso ajuda os redatores de conteúdo a visualizar a aparência dos campos quando são obrigatórios (indicador de asterisco) ou bloqueados devido a permissões.

{
  "type": "field",
  "label": "Secret Key",
  "defaultValue": "SUPER_SECURE_TOKEN",
  "readOnly": true,
  "required": true,
  "interactive": true
}

Props

Notas do Desenvolvedor e Acessibilidade

• Hidratação de Comutador Inteligente: Por padrão, se o campo for uma apresentação estática padrão sem gatilhos de validação personalizados ou vinculações dinâmicas, ele permanece como marcação SSR estática leve. Fornecer qualquer um de validator, defaultValue ou "interactive": true promove automaticamente o elemento a uma ilha de cliente totalmente hidratada.
• Conexões Descritivas WAI-ARIA: O elemento wrapper gerencia dinamicamente as conexões aria. O elemento de entrada registra automaticamente aria-describedby apontando para os IDs exatos gerados tanto do slot de texto de ajuda quanto do slot de texto de erro.
• Prevenção de Vazamento de Atributos: A primitiva FieldRoot inclui filtros integrados para evitar que propriedades de entrada padrão (como placeholder, autocomplete ou name) vazem para a <div> wrapper externa, garantindo uma saída HTML completamente válida e limpa.
• Contexto Composicional: O componente Field suporta uma arquitetura composicional. Ao aninhar subelementos (como elementos Textarea personalizados ou elementos select personalizados) como filhos no Page Builder, eles consomem automaticamente o contexto compartilhado do Field externo para resolver atributos de validação apropriados.