Crie uma resposta de pesquisa que não possa se contradizer: caixas de seleção nativas do ONS, respostas mutuamente exclusivas, referências exatas de tipografia e cores e um fluxo local completo de revisão.
Checkbox nativo do ONS 73.13.1 e CSS/JavaScript Mutually Exclusive. Pergunta, validação/análise do aplicativo e alternativa explícita em Arial são originais. · Referência de implementação
02
Referência de design sistema de design ONS
ONS Design System 73.13.1 compilado CSS, JavaScript e variáveis Sass, verificados em relação ao manual de serviço público. O exemplo usa o comportamento nativo de Checkbox e Mutually Exclusive. No exemplo independente, Arial substitui OpenSans; a receita de cópia para produção inclui as fontes empacotadas. A pergunta sobre viagens e a análise local são conteúdo original de demonstração.
Design específico para questionários sistema de design ONS
Preserve o significado de uma resposta
O ONS atua tanto na coleta estatística quanto na publicação de informações. Em um questionário, respostas mutuamente exclusivas são uma questão de qualidade dos dados: o usuário não pode enviar tanto uma forma de viajar quanto uma resposta indicando que nenhuma viagem ocorreu. O componente nativo Mutually Exclusive associa essas opções e explica a desmarcação às tecnologias assistivas.
O exemplo apresenta uma pergunta original sobre viagens para uma biblioteca e oferece uma prévia local da resposta. Ele evita deliberadamente os elementos de identidade visual do ONS e não afirma que as respostas sejam coletadas. Uma pesquisa em produção precisaria de consentimento, retenção, lógica de encaminhamento e validação no servidor próprios.
Hierarquia de perguntas legível sistema de design ONS
Uma legenda pode ser o título da página
A família principal é Open Sans, com o conjunto estilístico 1 escolhido por suas formas distintas. A matriz tipográfica Sass nativa tem valores fixos para tamanhos pequeno e grande, em vez de uma escala contínua inventada. O texto do corpo permanece em 18px, com entrelinha de 28px. A classe principal de tamanho grande passa de 32/44 para 48/56 no breakpoint médio.
Em uma página com uma única pergunta, o h 1 pode ficar dentro da legenda do fieldset, de modo que o nome acessível do grupo corresponda ao título visível. Não crie um segundo h 1 sem relação com o primeiro acima dele. O exemplo mantém o contexto do serviço em um parágrafo menor e a instrução de escolha abaixo da legenda.
A demonstração independente usa Arial explicitamente para evitar solicitações de fontes ausentes. A receita de instalação copia as fontes junto com CSS; isso é necessário para que quem adotar o sistema use a fonte OpenSans publicada em vez de uma alternativa.
Papéis em uma interface de pesquisa sistema de design ONS
O foco é diferente do estado
O ONS atribui variáveis semânticas a cores primitivas. O texto é preto, os links comuns são azul oceano e o botão principal é verde-folha. O amarelo-sol indica o foco. O vermelho-rubi comunica erros, mas a mensagem de erro ainda deve dizer qual ação é necessária. Um botão Continuar verde não garante que a resposta já tenha passado pela validação.
O questionário local usa a borda nativa da caixa de seleção e seu estilo de seleção. Ele não transforma cada resposta em um cartão promocional separado. Uma linha superior neutra e curta separa o exemplo independente da pergunta, sem reproduzir o cabeçalho do ONS.
Mantenha o indicador de foco visível nativo tanto na caixa de seleção quanto no botão de ação.
Apresente a instrução por escrito “Selecione todas as opções aplicáveis” antes das opções comuns.
Separe a resposta oposta com “Ou” para que a diferença fique clara antes da interação.
Colunas e largura das respostas sistema de design ONS
Use a largura de leitura do questionário
A grade de doze colunas expressa larguras por meio de classes como ons-col-8@m. A partir de 740px, essa classe ocupa oito colunas; abaixo disso, o mesmo elemento preenche a largura de conteúdo disponível. O exemplo local usa essa coluna nativa para que a pergunta longa quebre em uma largura de leitura confortável, sem se estender por toda a tela do desktop.
O contêiner padrão tem largura máxima de 64.6256rem na versão inspecionada e preenchimento horizontal de 1rem. O guia público da grade também descreve uma linha de base de 8px e gutters de 16/24px em torno do limite de espaçamento de 600px. Mantenha esses conceitos separados do breakpoint médio de coluna, em 740px; eles não formam uma única mudança universal para dispositivos móveis.
A análise das respostas substitui a pergunta na mesma coluna, e Alterar respostas retorna aos controles existentes. Os valores permanecem na memória, sem mudança de rota nem solicitação de rede.
Os utilitários de espaçamento executáveis são mais granulares do que a declaração sobre a linha de base de 8px: as margens inferiores xs, s, m, l e xl são de 12,16,20,24 e 32px com uma raiz de 16px. Por isso, a referência lista os valores reais dos utilitários separadamente das orientações da grade.
Uma caixa de seleção usa ons-checkbox__input e um ons-checkbox__label associado dentro de ons-checkbox. O input mantém os atributos comuns name e value para que a semântica nativa do formulário continue funcionando. A estrutura mais ampla ons-checkboxes__item fornece o espaçamento e a área de toque previstos pela folha de estilos.
As opções comuns compartilham ons-js-exclusive-group-item. A opção final usa ons-js-exclusive-option, com data-deselect-message explicando o efeito. O elemento span da região dinâmica deve estar presente com os dois atributos de adjetivo: ele não é uma marcação decorativa extra. Removê-lo quebraria as premissas do controlador nativo.
Este exemplo de código-fonte está completo para três opções comuns e uma resposta oposta. Adapte os substantivos e os valores a uma pergunta real; não basta renomear um controle de validação sem relação como “exclusivo”.
html
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
Validação e comportamento de alteração sistema de design ONS
Estado da biblioteca e estado do aplicativo
A biblioteca controla quais opções opostas são limpas. O pequeno manipulador do aplicativo no exemplo apenas verifica se existe pelo menos uma resposta antes de exibir uma análise local. Se nenhuma opção estiver selecionada, ele mostra um erro por escrito e move o foco para a mensagem associada. O link do erro leva diretamente à primeira opção, onde o usuário pode agir.
Além do valor da caixa de seleção no DOM, o controlador mantém hasValue em cache. Redefinir usando apenas checked=false pode deixar esse cache desatualizado. Por isso, a ação de redefinição clica em cada input marcado, permitindo que os listeners nativos atualizem o modelo, e depois devolve o foco à pergunta. Essa é uma preocupação concreta de integração que não pode ser verificada apenas observando a folha de estilos.
A análise apresenta uma lista dos rótulos selecionados. Alterar respostas preserva os controles e as seleções. Nenhum painel de sucesso afirma que uma resposta à pesquisa foi recebida, pois este exemplo não tem um servidor por trás.
O pacote npm inclui recursos compilados, fontes Sass, macros Nunjucks e um modelo básico de página. Esta prévia usa a versão compilada de HTML: copie o CSS oficial e o main.js, reproduza a marcação documentada e carregue o script depois do conteúdo do body. O script inicializa os hooks correspondentes dos componentes quando o DOM está pronto.
Um projeto renderizado no servidor também pode usar os arquivos de macros Nunjucks de components. A macro Checkbox aceita o array de caixas de seleção, rótulos, descrições, configuração de erros e configuração mutuallyExclusive. Definir dontWrap transfere a responsabilidade pelo fieldset para o componente de pergunta externo; não é uma forma de omitir o nome acessível do grupo.
Se selecionar arquivos Sass individuais, importe primeiro as variáveis do sistema, os auxiliares, os utilitários, a base e os objetos; em seguida, importe as regras dos componentes e quaisquer dependências entre eles. O CSS completo já compilado evita ter de selecionar essas dependências para este exemplo autônomo pequeno.
Fixe a versão do pacote e disponibilize css, scripts e fontes em um único diretório local de recursos estável.
Escolha HTML compilado para uma página estática ou configure os caminhos das macros Nunjucks para um aplicativo renderizado no servidor.
Mantenha CSS, JavaScript e a marcação na mesma versão e, após uma atualização, verifique novamente a exclusão mútua.
Sistema de design ONS Testar respostas contraditórias
Verificar o significado dos dados
Selecione Caminhar e Ônibus; depois, selecione “Não visitei”. As duas opções anteriores devem ser desmarcadas. Em seguida, selecione Bicicleta: a resposta oposta deve ser desmarcada, enquanto Bicicleta permanece selecionada. Repita usando a tecla Espaço nos campos com foco e verifique a região de anúncios, sem presumir que uma marca visual comprove o funcionamento completo.
Prossiga sem selecionar nenhuma opção para testar o erro; depois, confira uma resposta válida e volte usando Alterar respostas. Por fim, após uma sequência de respostas contraditórias, redefina o formulário e faça outra seleção; isso ajuda a detectar estados desatualizados no controlador nativo. Em 390px, a pergunta e todos os rótulos devem continuar legíveis, sem rolagem horizontal da página.
Estes testes verificam a interação local, não o envio de dados de uma pesquisa em produção, a certificação de acessibilidade nem a qualidade estatística da pergunta. Um serviço real ainda precisa validar no servidor os valores contraditórios e pesquisar se as categorias de resposta são abrangentes.
O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por HTTP.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ONS survey question specimen</title><link rel="stylesheet" href="vendor/ons-73.13.1/css/main.css"><style>body,input,button,select,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.specimen{border-top:4px solid var(--ons-color-ocean-blue);padding-top:16px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}[hidden]{display:none!important}.error{border-left:4px solid var(--ons-color-errors);padding:16px;margin:24px 0;color:var(--ons-color-errors)}.quiet{color:var(--ons-color-text-light)}fieldset{min-width:0}.ons-checkbox__label{max-width:100%}</style><main class="ons-container"><p class="ons-u-fs-s specimen">Independent specimen · Original library survey</p><div class="ons-grid"><div class="ons-grid__col ons-col-8@m"><section id="question"><p class="quiet">Travel · Question 1 of 1</p><div id="error" class="error" tabindex="-1" hidden><strong>Select a travel method or tell us you did not visit.</strong><p><a href="#walk">Go to the answer choices</a></p></div><form id="survey" novalidate><fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset><div class="actions"><button class="ons-btn" type="submit"><span class="ons-btn__inner">Review answer</span></button><button id="reset" type="button" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Reset</span></button></div></form><p class="ons-u-mt-l ons-u-fs-s quiet">Practice only. Your selection stays in this page and is not submitted.</p></section><section id="review" hidden><h1 tabindex="-1">Review your answer</h1><h2 class="ons-u-fs-m">Travel to the library last week</h2><ul id="answer"></ul><p>No response has been sent. Return to the question to change your selection.</p><button id="change" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Change answers</span></button></section></div></div></main><script src="vendor/ons-73.13.1/scripts/main.js"></script><script>const form=document.querySelector('#survey'),q=document.querySelector('#question'),r=document.querySelector('#review'),err=document.querySelector('#error'),checks=[...form.querySelectorAll('input[type=checkbox]')];form.onsubmit=e=>{e.preventDefault();const chosen=checks.filter(x=>x.checked);if(!chosen.length){err.hidden=false;err.focus();return}err.hidden=true;document.querySelector('#answer').replaceChildren(...chosen.map(x=>{let li=document.createElement('li');li.textContent=document.querySelector('label[for="'+x.id+'"]').textContent.replace(/^Or, /,'');return li}));q.hidden=true;r.hidden=false;r.querySelector('h1').focus()};document.querySelector('#change').onclick=()=>{r.hidden=true;q.hidden=false;checks[0].focus()};document.querySelector('#reset').onclick=()=>{checks.filter(x=>x.checked).forEach(x=>x.click());err.hidden=true;checks[0].focus()};window.demoReady=true;</script></html>
Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente.
Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia.
04
Configuração do agente sistema de design ONS
Ponto de partida para implementação
A versão nativa 73.13.1, com CSS e JavaScript compilados, é executada no exemplo local. Arial é uma alternativa local explícita; as instruções de cópia para produção incluem as fontes OpenSans empacotadas. O ZIP completo do exemplo funcional, em Sources, também fornece as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/ons.html. Não abra exemplos baseados em módulos por meio de file://.
bash / HTML
npm install --save-exact @ons/[email protected]
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/
<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></script>
Um prompt para seu projeto
Prompt para agente de IA
Crie um exemplo autônomo de pesquisa ONS73.13.1 usando os hooks nativos Checkbox e Mutually Exclusive, um fieldset/legend associado, um grupo comum de respostas e uma resposta oposta. Inclua a região dinâmica obrigatória e os atributos de desmarcação. Disponibilize main.js e CSS nativos da mesma versão; não crie um controlador substituto para exclusividade. Inclua validação local de campos sem resposta e revisão das respostas com edições preservadas, sem afirmar que há recebimento no servidor. Redefina por meio dos eventos nativos para manter o estado em cache consistente. Use ons-col-8@m e as regras verificadas de tipografia e cores semânticas, sem marcas de identidade oficiais.
05
Fontes e escopo de sistema de design ONS
Exemplo independente de implementação com texto original para a pesquisa. O código nativo está licenciado sob MIT; a identidade e o licenciamento de conteúdo do ONS são independentes. Nenhuma resposta é transmitida, persistida ou apresentada como estatística oficial.
