Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño ONS.
Crea una respuesta a una encuesta que no pueda contradecirse: casillas nativas de ONS, respuestas mutuamente excluyentes, referencias exactas a tipos y colores, y un flujo local completo de revisión.
Componentes nativos Checkbox y Mutually Exclusive de ONS 73.13.1 CSS/JavaScript. Pregunta original, validación y revisión en la aplicación, y alternativa explícita en Arial. · Referencia de implementación
02
Sistema de diseño ONS Referencia de diseño
ONS Design System 73.13.1 compilado CSS, JavaScript y variables de Sass, contrastados con el manual de servicio público. El ejemplo utiliza el comportamiento nativo de Checkbox y Mutually Exclusive. En el ejemplo independiente, Arial sustituye a OpenSans; la receta de copia para producción incluye las fuentes empaquetadas. La pregunta sobre viajes y la revisión local son contenido de demostración original.
Sistema de diseño ONS Diseño específico para cuestionarios
Protege el significado de las respuestas
ONS se dedica tanto a recopilar datos estadísticos como a publicar información. En un cuestionario, las respuestas mutuamente excluyentes son una cuestión de calidad de los datos: el usuario no debe poder enviar a la vez un medio de transporte y una respuesta que indique que no hizo ningún viaje. El componente nativo de exclusión mutua vincula esas opciones y explica a las tecnologías de asistencia que se anula la selección.
El ejemplo plantea una pregunta original sobre los desplazamientos a una biblioteca y muestra una vista previa local de la respuesta. Evita deliberadamente los elementos gráficos de identidad de ONS y no afirma que las respuestas se recopilen. Una encuesta de producción necesitaría su propio consentimiento, política de conservación de datos, lógica de navegación y validación en el servidor.
Sistema de diseño ONS Jerarquía clara de la pregunta
La leyenda puede ser el encabezado de la página
La familia tipográfica principal es Open Sans, con el conjunto estilístico 1 para aportar formas de letra distintivas. La matriz tipográfica nativa de Sass tiene valores fijos para tamaños pequeños y grandes, no una escala continua inventada. El texto del cuerpo se mantiene en 18px con un interlineado de 28px. La clase principal de tamaño grande pasa de 32/44 a 48/56 en el punto de ruptura medio.
En una página con una sola pregunta, el h 1 puede ir dentro de la leyenda del grupo de campos para que el nombre accesible del grupo coincida con el título visible. No añadas encima otro h 1 sin relación. En el ejemplo, el contexto del servicio aparece en un párrafo más pequeño y la instrucción para elegir va debajo de la leyenda.
La demostración independiente usa Arial explícitamente para evitar solicitudes de fuentes inexistentes. La guía de instalación copia las fuentes junto a CSS; esto es necesario si quien lo adopta quiere usar la tipografía OpenSans publicada en lugar de una fuente alternativa.
Sistema de diseño ONS Funciones de la interfaz de encuesta
El foco es independiente del estado
ONS asigna variables semánticas a colores primitivos. El texto es negro, los enlaces habituales son Ocean Blue y el botón principal es Leaf Green. Sun Yellow es el color de foco. Ruby Red comunica errores, pero el mensaje de error debe indicar qué acción se necesita. Un botón Continuar verde no garantiza que la respuesta ya haya superado la validación.
El cuestionario local utiliza el borde y el estilo de selección nativos de la casilla. No convierte cada respuesta en una tarjeta de marketing independiente. Una línea superior neutra y breve separa el ejemplo independiente de la pregunta sin reproducir la cabecera de ONS.
Mantén el indicador de foco visible nativo tanto en la entrada de la casilla como en el botón de acción.
Antes de las opciones habituales, incluye la instrucción escrita «Selecciona todas las opciones que correspondan».
Separa la respuesta opuesta con «O bien» para que la diferencia sea visible antes de interactuar.
Sistema de diseño ONS Columnas y ancho de las respuestas
Usa el ancho propio del cuestionario
La cuadrícula de doce columnas expresa los anchos mediante clases como ons-col-8@m. A partir de740px, esa clase ocupa ocho columnas; por debajo, el mismo elemento ocupa todo el ancho disponible del contenido. El ejemplo local utiliza esa columna nativa para que la pregunta larga se ajuste a un ancho de lectura cómodo, en lugar de extenderse por todo el escritorio.
En la versión inspeccionada, el contenedor estándar tiene un ancho máximo de 64.6256rem y un relleno horizontal de 1rem. La guía pública de la cuadrícula también describe una línea de base de 8px y márgenes interiores de 16/24px en torno a su límite de espaciado de 600px. Distingue esos conceptos del punto de ruptura medio de 740px para las columnas; no constituyen un único cambio universal para móviles.
La revisión de respuestas sustituye la pregunta dentro de la misma columna, y Cambiar respuestas vuelve a los controles existentes. Los valores permanecen en memoria, sin cambio de ruta ni solicitud de red.
Las utilidades de espaciado ejecutables tienen más incrementos que la línea de base de 8px: los márgenes inferiores xs, s, m, l y xl son de 12,16,20,24 y 32px, respectivamente, con una raíz de 16px. Por eso, la referencia enumera los valores reales de las utilidades por separado de las pautas de la cuadrícula.
Una casilla usa ons-checkbox__input y un ons-checkbox__label asociado dentro de ons-checkbox. La entrada conserva sus atributos name y value habituales para mantener la semántica nativa del formulario. La estructura más amplia ons-checkboxes__item proporciona el espaciado y el área interactiva que espera la hoja de estilos.
Las opciones habituales comparten ons-js-exclusive-group-item. En cambio, la opción final usa ons-js-exclusive-option, con data-deselect-message para explicar el efecto. El elemento span de la región dinámica debe incluir los dos atributos de adjetivo: no es marcado decorativo sobrante. Si se elimina, se incumplen las suposiciones del controlador nativo.
Este ejemplo de código es completo para tres opciones habituales y una respuesta opuesta. Adapta los sustantivos y los valores a una pregunta real; no te limites a cambiar el nombre de un control de validación no relacionado y llamarlo «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>
Sistema de diseño ONS Validación y comportamiento al cambiar
Estado de la biblioteca y estado de la aplicación
La biblioteca se encarga de borrar las opciones excluyentes opuestas. El pequeño controlador de la aplicación del ejemplo solo comprueba si existe al menos una respuesta antes de mostrar una revisión local. Si no hay ninguna selección, muestra un mensaje de error y enfoca el mensaje asociado. El enlace del error lleva directamente a la primera opción, donde el usuario puede actuar.
El controlador realiza un seguimiento del estado almacenado en caché de hasValue, además del valor de la casilla de verificación en el DOM. Restablecer con checked=false por sí solo podría dejar obsoleta esa caché. Por eso, la acción de restablecimiento hace clic en cada campo marcado, lo que permite que los detectores de eventos nativos actualicen su modelo, y luego devuelve el foco a la pregunta. Se trata de un aspecto concreto de la integración que no se puede comprobar examinando solo la hoja de estilos.
La revisión muestra una lista de las etiquetas seleccionadas. Cambiar las respuestas conserva los controles y su selección. No se muestra ningún panel de confirmación que afirme haber recibido una respuesta a la encuesta, porque este ejemplo no tiene un servidor asociado.
Sistema de diseño ONS Incorporación de recursos y plantillas
Dos opciones compatibles
El paquete npm incluye recursos compilados, archivos fuente Sass, macros Nunjucks y una plantilla de página base. Esta vista previa utiliza la opción HTML compilada: copia el CSS oficial y main.js, reproduce el marcado documentado y carga el script después del contenido del cuerpo. El script inicializa los enlaces de componentes correspondientes cuando el DOM está listo.
Un proyecto renderizado en el servidor puede usar en su lugar los archivos de macros de Nunjucks de components. La macro Checkbox acepta su matriz de casillas, etiquetas, descripciones, configuración de errores y configuración de mutuallyExclusive. Al establecer dontWrap, la responsabilidad del fieldset pasa al componente de pregunta contenedor; no es una forma de omitir el nombre accesible del grupo.
Si seleccionas archivos Sass individuales, importa primero las variables del sistema, los helpers, las utilidades, la base y los objetos; después, las reglas de los componentes y las dependencias que necesiten. El CSS completo y compilado evita tener que seleccionar esas dependencias para este pequeño ejemplo independiente.
Fija la versión del paquete y sirve CSS, scripts y fuentes desde un único directorio local de recursos estable.
Elige HTML compilado para una página estática o configura las rutas de las macros Nunjucks para una aplicación renderizada en el servidor.
Mantén CSS, JavaScript y el marcado en la misma versión, y vuelve a comprobar la exclusión mutua después de actualizar.
Sistema de diseño ONS Prueba de respuestas contradictorias
Verifica el significado de los datos
Selecciona «A pie» y «Autobús»; después, selecciona «No fui». Ambas opciones anteriores deberían desmarcarse. A continuación, selecciona «Bicicleta»: la respuesta opuesta debe desmarcarse y «Bicicleta» debe permanecer marcada. Repite la prueba con la barra espaciadora en los campos enfocados y examina la región de anuncios; no des por hecho que una marca visual demuestra que todo el comportamiento funciona.
Continúa sin seleccionar ninguna opción para probar el error; después, revisa una respuesta válida y vuelve atrás con «Cambiar respuestas». Por último, restablece el formulario después de una secuencia de respuestas contradictorias y haz otra selección; así se detecta si el estado del controlador nativo quedó obsoleto. A 390 px, la pregunta y todas las etiquetas deben seguir siendo legibles sin desplazamiento horizontal de la página.
Estas pruebas verifican la interacción local, no el envío de datos de una encuesta en producción, la certificación de accesibilidad ni la calidad estadística de la pregunta. Un servicio real aún necesita validar en el servidor los valores contradictorios e investigar si las categorías de respuesta están completas.
El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante 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>
Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local.
Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa.
04
Sistema de diseño ONS Configuración del agente
Punto de partida para la implementación
Los archivos CSS y JavaScript compilados de Native 73.13.1 se ejecutan en el ejemplo local. Arial es una alternativa local explícita; las instrucciones de copia para producción incluyen las fuentes OpenSans del paquete. El ZIP completo del ejemplo funcional, disponible en Sources, también proporciona las dependencias exactas de la vista previa y el documento completo. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/ons.html. No abras con file:// los ejemplos que usan módulos.
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>
Una instrucción para tu proyecto
Instrucción para el agente
Crea un ejemplo independiente de encuesta ONS73.13.1 con los enlaces nativos Checkbox y Mutually Exclusive, un fieldset/legend asociado, un grupo de respuestas habituales y una respuesta opuesta. Incluye la región dinámica obligatoria y los atributos para desmarcar. Sirve el CSS nativo correspondiente y main.js; no escribas un controlador sustituto para la exclusividad. Añade validación local de campos vacíos y revisión de respuestas que permita conservar los cambios, sin afirmar que se recibieron en un servidor. Restablece mediante eventos nativos para mantener sincronizado el estado en caché. Usa ons-col-8@m y las reglas verificadas de tipografía y color semántico, sin marcas de identidad oficial.
05
Sistema de diseño ONS Fuentes y alcance
Ejemplo de implementación independiente con texto original para la encuesta. El código nativo tiene licencia MIT; la identidad de ONS y las licencias del contenido se gestionan por separado. Las respuestas no se transmiten, almacenan ni presentan como estadísticas oficiales.
