Combina grupos de selección nativos de HDS, colores semánticos para mensajes y resúmenes de errores vinculados en un flujo completo de revisión y corrección local.
Core y límites de React del sistema de diseño Helsinki
Elige la implementación que realmente ejecutas
HDS proporciona Core CSS, componentes React y tokens de diseño. Este ejemplo fija hds-core5.2.2, el paquete descargado e inspeccionado para el ejemplo. Los números de versión de las publicaciones del repositorio pueden diferir de la versión de un paquete concreto, así que una etiqueta más reciente del repositorio no demuestra que este ejemplo ejecute esa versión.
Core proporciona variables base y estilos para cada componente. No proporciona el estado de la aplicación del formulario utilizado aquí. La lógica de selección, validación, revisión y modificación es original de JavaScript y se basa en controles nativos de HTML y en el patrón documentado de formularios de HDS.
Tipografía y límites de las fuentes del sistema de diseño Helsinki
Usa la fuente alternativa nativa de forma transparente
La variable de fuente da prioridad a HelsinkiGroteskPro, seguida de Arial y sans-serif. El README de Core excluye explícitamente los archivos de fuente Helsinki por motivos de derechos de autor. La vista previa conserva la fuente alternativa en lugar de descargar fuentes restringidas o afirmar, sin fundamento, que la representación de marca es exacta.
El token base del cuerpo del texto es de 16 px, con una altura de línea de 1,5. heading-xl mide 48 px y el token para móviles, 40 px; la vista previa cambia entre ambos en 576 px. Son valores con nombre, pero una variable CSS que contiene un punto de interrupción no crea automáticamente un comportamiento adaptable. La regla de medios explícita forma parte de la composición de la aplicación.
Dos sistemas de espaciado del sistema de diseño Helsinki
Separa los espacios entre componentes del ritmo de la página
HDS distingue entre una secuencia de espaciado para componentes y otra, más amplia, para el diseño. La primera incluye 2, 4, 8, 12, 16 y 24 px, y aumenta hasta 72 px. El espaciado de diseño llega a 128 px. Usar spacing-layout-xl como espacio entre casillas contiguas desbordaría el grupo, aunque la variable sea válida.
El componente de casilla define un control de 24 px, un borde de 2 px y un contorno de foco de 3 px. El botón tiene una altura mínima de 56 px y esquinas cuadradas. La vista previa conserva estas formas nativas, mientras que el formulario se sitúa en un contenedor de la aplicación limitado al ancho de referencia publicado de 720 px.
Funciones de color en un formulario del sistema de diseño Helsinki
No confundas los nombres de la paleta con los de los estados
El tema interactivo predeterminado usa Bus blue, mientras que el contorno de foco usa Coat of arms blue. Los errores usan un tono frambuesa distinto y una superficie de error clara. Un acento de la paleta, como Copper, puede servir para el encabezado, pero no debería sustituir la función de error solo por resultar más llamativo.
El error integrado del grupo de selección combina texto, un borde izquierdo contrastante y un icono. No se basa únicamente en el rojo. Los enlaces del resumen de errores usan el color interactivo habitual para que las personas reconozcan cómo volver al campo.
Anatomía de un grupo de casillas del sistema de diseño Helsinki
Un grupo tiene una pregunta y varias respuestas
La estructura nativa consta de un fieldset con una leyenda, un contenedor de elementos y envoltorios individuales para cada casilla. Cada input precede inmediatamente a su etiqueta, ya que la hoja de estilos usa esa relación para los estados visuales. La leyenda explica la tarea de selección; cada etiqueta nombra un tema disponible.
La demostración pide seleccionar al menos dos temas; se trata de una regla de negocio original. Las casillas son adecuadas porque se pueden mantener seleccionadas varias opciones. Un grupo de botones de opción expresaría una elección excluyente y contradiría la tarea. La indicación del fieldset permanece visible antes y después de la validación.
HTML
<fieldset class="hds-selection-group" aria-describedby="topics-hint">
<legend class="hds-selection-group__legend">Topics for your afternoon</legend>
<p id="topics-hint">Choose at least two topics.</p>
<div class="hds-selection-group__items hds-selection-group__items--vertical">
<div class="hds-checkbox">
<input class="hds-checkbox__input" type="checkbox" id="repair" value="Repair and reuse">
<label class="hds-checkbox__label" for="repair">Repair and reuse</label>
</div>
<div class="hds-checkbox">
<input class="hds-checkbox__input" type="checkbox" id="garden" value="Urban gardening">
<label class="hds-checkbox__label" for="garden">Urban gardening</label>
</div>
</div>
</fieldset>
Errores vinculados y recuperación del sistema de diseño Helsinki
Enfoca el problema y conserva el trabajo realizado
HDS recomienda colocar un resumen de errores debajo del encabezado del formulario tras un envío fallido. Los elementos de la lista enlazan con los controles erróneos y el foco pasa al encabezado del resumen. La demostración sigue esa secuencia: al revisar con cero o un tema, aparece el resumen y el mensaje integrado; el enlace enfoca la primera casilla.
Tras el primer intento, cada cambio en la selección vuelve a comprobar el mínimo. Cuando se seleccionan dos temas, desaparecen ambas indicaciones de error sin borrar las opciones seleccionadas. Si vuelve a fallar el intento, el foco regresa al encabezado del resumen. La regla se comprueba de nuevo durante la revisión; en un servicio real, las indicaciones del lado del cliente no sustituyen la validación del servidor.
Intenta revisar sin seleccionar temas y confirma que el resumen recibe el foco.
Sigue el enlace y elige dos temas; confirma que el error desaparece.
Abre la revisión local, vuelve para cambiar los temas y comprueba que ambas selecciones se conserven.
Recursos de sistema de diseño Helsinki y ejemplo completo
Cargar la base y los componentes seleccionados
El paquete Core separa base.css de los estilos de los componentes. Importar solo la base proporciona variables y tipografía, pero no los elementos de las casillas ni de las notificaciones. La configuración indica los archivos exactos que utiliza este ejemplo y mantiene el conjunto de recursos más reducido que el paquete con todos los componentes.
El ejemplo completo incluye validación y reinicio de la aplicación. El estado final se denomina revisión local porque no se registra ni se envía nada. Borrar la selección es una acción deliberada que restablece las opciones y el historial de validación, y luego enfoca la primera entrada; no se activa por un error normal en un campo.
base.css proporciona colores, espaciado, tipografía y dimensiones de referencia.
Los estilos de casillas y grupos de selección proporcionan controles agrupados y comentarios en línea.
Los estilos de notificaciones y botones proporcionan la superficie del resumen de errores y las acciones.
Qué demuestra el ejemplo de sistema de diseño Helsinki
Detalles de implementación sin afirmar que existe un servicio
La vista previa muestra estilos reales de componentes HDS, foco del teclado, corrección y conservación de datos en 1440, 768 y 390 px. No afirma ser una auditoría exhaustiva de accesibilidad. Un servicio municipal multilingüe real también necesita etiquetas traducidas, metadatos de idioma adecuados, reglas del lado del servidor y una respuesta confirmada de su sistema de servicio.
El código fuente está bajo la licencia MIT, pero la tipografía municipal personalizada tiene sus propios límites de uso. Este ejemplo independiente con fines didácticos utiliza temas de programa ficticios y no incluye ninguna identidad oficial de Helsinki. Su aspecto visible y su estado local nunca deben confundirse con una inscripción real a un evento.
Flujo completo de selección con errores vinculados
Foco en el resumen de errores, corrección vinculada, revisión, cambio y borrado de la selección.
HTML
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Plan a skills afternoon</title><link rel="stylesheet" href="vendor/hds-core-5.2.2/base.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/checkbox.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/selection-group.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/notification.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/button.css"><style>*{box-sizing:border-box}body{margin:0;padding:var(--spacing-layout-s) var(--spacing-s);font-family:var(--font-default);color:var(--color-black-90)}main{max-width:720px;margin:auto}h1{margin-top:8px}header{border-top:8px solid var(--color-copper);padding-top:var(--spacing-m)}.hds-selection-group{margin:24px 0}.hds-notification{margin:24px 0}.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}footer{font-size:14px;line-height:1.5;margin-top:32px;border-top:1px solid var(--color-black-20);padding-top:16px}#review{background:var(--color-silver-light);padding:24px;margin-top:24px}[hidden]{display:none!important}@media(max-width:575px){.heading-xl{font-size:var(--fontsize-heading-xl-mobile)}}button{max-width:100%}</style><main class="text-body"><header><small>COMMUNITY SKILLS · LOCAL PLAN</small><h1 class="heading-xl">Plan a skills afternoon</h1><p>Select at least two topics for an example programme. Nothing is registered or sent.</p></header><form id="form" novalidate><div id="summary" class="hds-notification hds-notification--error" hidden><div class="hds-notification__content"><h2 id="summary-heading" class="hds-notification__label" tabindex="-1">Check your topic selection</h2><div class="hds-notification__body"><ul><li><a href="#repair" id="error-link">Choose at least two topics</a></li></ul></div></div></div><fieldset class="hds-selection-group" aria-describedby="hint field-error"><legend class="hds-selection-group__legend">Topics for your afternoon</legend><p id="hint">Choose two or more. You can change your selection before reviewing the plan.</p><div class="hds-selection-group__items hds-selection-group__items--vertical"><div class="hds-checkbox"><input id="repair" type="checkbox" class="hds-checkbox__input" value="Repair and reuse"><label class="hds-checkbox__label" for="repair">Repair and reuse</label></div><div class="hds-checkbox"><input id="digital" type="checkbox" class="hds-checkbox__input" value="Everyday digital skills"><label class="hds-checkbox__label" for="digital">Everyday digital skills</label></div><div class="hds-checkbox"><input id="garden" type="checkbox" class="hds-checkbox__input" value="Urban gardening"><label class="hds-checkbox__label" for="garden">Urban gardening</label></div></div><div id="field-error" class="hds-selection-group__error-text" hidden>Choose at least two topics.</div></fieldset><p id="count" role="status">0 topics selected.</p><div class="actions"><button class="hds-button hds-button--primary" type="submit">Review local plan</button><button id="reset" class="hds-button hds-button--secondary" type="button">Clear selection</button></div></form><section id="review" hidden tabindex="-1"><h2 class="heading-m">Your selected topics</h2><ul id="selected"></ul><p>This is a local review, not a booking confirmation.</p><button id="change" class="hds-button hds-button--secondary">Change topics</button></section><footer>Native HDS Core5.2.2 styles with Arial fallback. Original selection rule and local review. No Helsinki branding, registration or backend.</footer></main><script>let attempted=false;const boxes=[...document.querySelectorAll('input[type=checkbox]')];const values=()=>boxes.filter(x=>x.checked);function validate(focus=false){const n=values().length;document.querySelector('#count').textContent=n+' topics selected.';const bad=attempted&&n<2;document.querySelector('#summary').hidden=!bad;document.querySelector('#field-error').hidden=!bad;boxes.forEach(x=>{if(bad)x.setAttribute('aria-invalid','true');else x.removeAttribute('aria-invalid')});if(bad&&focus)document.querySelector('#summary-heading').focus();return !bad}boxes.forEach(x=>x.onchange=()=>validate());document.querySelector('#error-link').onclick=e=>{e.preventDefault();boxes[0].focus()};document.querySelector('#form').onsubmit=e=>{e.preventDefault();attempted=true;if(!validate(true))return;const list=document.querySelector('#selected');list.replaceChildren();values().forEach(x=>{const li=document.createElement('li');li.textContent=x.value;list.append(li)});document.querySelector('#form').hidden=true;document.querySelector('#review').hidden=false;document.querySelector('#review').focus()};document.querySelector('#change').onclick=()=>{document.querySelector('#form').hidden=false;document.querySelector('#review').hidden=true;boxes[0].focus()};document.querySelector('#reset').onclick=()=>{boxes.forEach(x=>x.checked=false);attempted=false;validate();boxes[0].focus()};</script></html>
Configuración del agente de sistema de diseño Helsinki
Punto de partida para la implementación
Rutas exactas de los recursos de Core. El código de la aplicación se encarga de la validación y la revisión; HelsinkiGroteskPro no está incluido. El ZIP del ejemplo funcional completo, disponible en Fuentes, 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/helsinki.html. No abras ejemplos basados en módulos mediante file://.
bash
npm install [email protected]
# CSS imports in a bundler:
# import 'hds-core/lib/base.css';
# import 'hds-core/lib/components/checkbox/checkbox.css';
# import 'hds-core/lib/components/selection-group/selection-group.css';
# import 'hds-core/lib/components/notification/notification.css';
# import 'hds-core/lib/components/button/button.css';
# In plain HTML, copy these files into public assets and link base.css first.
# HelsinkiGroteskPro is not bundled; the native font stack falls back to Arial.
Una instrucción para tu proyecto
Instrucción para el agente
Usa HDS Core 5.2.2 base y el componente seleccionado CSS. Agrupa las casillas relacionadas con fieldset/legend, conserva las etiquetas y las indicaciones, y usa tokens semánticos para los errores. Si la revisión falla, muestra los errores vinculados debajo del encabezado del formulario y enfoca el encabezado del resumen. Vuelve a comprobar tras la corrección, conserva los valores seleccionados y distingue la revisión local del envío confirmado por el servidor.
05
Fuentes y alcance de sistema de diseño Helsinki
Ejemplo independiente de OpenDesign. Sin recurso tipográfico ni identidad de servicio de Helsinki; no hay inscripción ni resultado de backend.
