Créez des formulaires de service public finlandais faciles à lire avec Source Sans 3, des tokens d’espacement explicites et un modèle de sélection de document permettant de corriger les choix.
Essayez avec un PDF, rejetez un fichier non pris en charge et supprimez le document sélectionné. Les fichiers restent dans votre navigateur.
Documentation officielle, dépôt de jetons examiné et métadonnées de suomifi-ui-components 18.0.0. L’aperçu est une interprétation originale, pas l’environnement d’exécution natif de React.
| Nom / règle | Valeur / configuration | Utilisation |
|---|---|---|
Family | Source Sans 3 | Version 18 ; la version 17 et les versions antérieures utilisaient Source Sans Pro. Charger les polices séparément. |
Body text | 18px | Même valeur par défaut sur mobile et ordinateur. |
Small body | 16px | Traitement smallScreen du texte, et non règle automatique liée à la taille de l’écran. |
Lead | 22px / 20px smallScreen | Une seule introduction par vue ; ne pas utiliser le style d’introduction pour chaque paragraphe. |
Weights | 300 / 400 / 600 | Ressources de polices requises par le package de composants. |
| Nom / règle | Valeur / configuration | Utilisation |
|---|---|---|
Space scale | 5, 10, 15, 20, 25, 30, 40, 60, 80px | De xxs à xxxxl dans le JSON du dépôt examiné. |
Inset scale | 2, 4, 6, 8, 10, 16, 20px | De insetXxs à insetXxl ; il ne s’agit pas de l’échelle d’espacement externe. |
Basic radius | 2px | repository radius.basic ; ne pas supposer un grand rayon pour les cartes. |
Highlight base | hsl(212, 63%, 45%) | Bleu interactif par défaut. |
Highlight dark 1 | hsl(212, 63%, 37%) | Rôle interactif plus sombre. |
Highlight light 2 | hsl(212, 63%, 90%) | Rôle de surface claire ; vérifier le contraste avec le texte choisi. |
| Nom / règle | Valeur / configuration | Utilisation |
|---|---|---|
Default maximum width | 600px | Largeur propre au composant, et non à la grille de tout le site. |
fullWidth | Boolean layout option | S’étire dans le conteneur parent si le formulaire en a besoin. |
smallScreen | Explicit compact presentation option | Ne pas déduire de cette propriété un point de rupture global automatique. |
Single selection | Chosen file replaces picker and drop area | La sélection multiple est un modèle distinct, avec les fichiers affichés en dessous. |
Required copy roles | labelText, hintText, dragAreaText, removeFileText, addedFileAriaText | Localisez chaque rôle ; le nom du fichier seul ne constitue pas une annonce accessible complète. |
Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.
Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.
Suomi.fi fournit React composants stylés avec styled-components et un package de jetons distinct. La version 18 utilise désormais Source Sans 3 comme police attendue. Les pages existantes en version 17 peuvent encore utiliser Source Sans Pro ; comparer leurs captures d’écran sans vérifier la version du package peut conduire à une correction typographique injustifiée.
L’aperçu intégré reste une interprétation de HTML/CSS, clairement identifiée, du modèle documenté à fichier unique. Un exemple distinct de FileInput natif de React est maintenant présenté ci-dessous, avec son callback vérifié, sa valeur contrôlée, ses dépendances et ses imports de polices. Il s’agit de deux implémentations de la même tâche de sélection locale ; l’exemple natif ne transforme pas rétroactivement l’aperçu intégré de HTML en composant de React.
Utilisez la taille de corps de texte documentée de 18px sur mobile comme sur ordinateur. Un écran étroit ne justifie pas de réduire toutes les explications du formulaire. Le style de petit texte est de 16px et convient aux informations secondaires. Le texte d’introduction est de 22px, réduit à 20px avec le style compact ; réservez-le à l’introduction de la page.
Chargez les graisses de police prévues avant de comparer le retour à la ligne. Le package de composants attend des ressources Source Sans 3, tandis que cet aperçu indépendant utilise volontairement Arial. Cette substitution est signalée dans la note de l’aperçu et ne doit pas être présentée comme un rendu exact du composant natif.
La source des jetons distingue l’espacement ordinaire de l’espacement intérieur. Dans le JSON examiné, l’espacement ordinaire l vaut 25px ; ne reprenez pas un ancien exemple du README qui indique 32px pour l. Les espacements intérieurs commencent à 2px et suivent une séquence différente. Utilisez les exports réels de la version installée pour générer les styles.
FileInput a une largeur maximale documentée de 600px et une option fullWidth. Il s’agit d’une contrainte propre au composant, et non d’un indice qu’un conteneur de page universel devrait mesurer 600px. Un formulaire de dépôt de documents peut intégrer le champ dans une mise en page plus large tout en gardant les explications près de son libellé.
Le libellé visible indique le document demandé. L’aide précise les formats, la taille et le nombre de fichiers autorisés avant l’ouverture du sélecteur. La zone de dépôt offre un raccourci au pointeur, mais ne doit pas remplacer le champ de sélection de fichier. Les recommandations officielles décrivent le contrôle de sélection comme le libellé d’un champ de fichier natif masqué.
En mode fichier unique, le document sélectionné remplace le sélecteur et la zone de dépôt. Prévoyez une action de suppression claire à côté du document. Le mode fichiers multiples utilise une liste différente ; n’ajoutez pas silencieusement d’autres fichiers à une demande à fichier unique.
L’exemple accepte un seul PDF de 5 000 000 octets maximum. Il s’agit de règles choisies pour ce scénario d’atelier, et non de valeurs par défaut du package ni d’une politique officielle de dépôt de fichiers de Suomi.fi. Le filtre accept du navigateur est uniquement une indication pour le sélecteur ; l’exemple vérifie indépendamment le nom et la taille du fichier après sa sélection ou son dépôt.
Si les métadonnées ne sont pas valides, le sélecteur reste disponible et des instructions permettent de corriger la situation. Un fichier valide est affiché avec son nom via textContent ; sa taille en octets est indiquée et le focus passe au contrôle de suppression. La suppression efface la valeur du champ sous-jacent, rétablit le sélecteur et lui rend le focus, ce qui permet de sélectionner à nouveau le même fichier.
L’implémentation de FileInput 18.0.0 publiée appelle onChange avec une FileList, et non avec un événement change de React. La valeur contrôlée est un tableau d’objets représentant les fichiers ; l’exemple convertit chaque File accepté en { file }. Le même callback est exécuté lorsque l’action de suppression intégrée modifie la liste : une FileList vide efface donc le tableau contrôlé. Ces contrats ont été vérifiés dans le module publié dist/esm/core/Form/FileInput/FileInput.js.
Gardez la valeur contrôlée dès le premier rendu en commençant par un tableau vide. Vérifiez la FileList reçue avant de la convertir en tableau. Cet exemple rejette les fichiers dont le nom ne se termine pas par .pdf ou dont la taille dépasse 5 000 000 octets, puis efface la sélection en cas de rejet. Il s’agit de règles propres à cet exemple, et non d’un contrôle de sécurité ni d’une politique de Suomi.fi. Une validation du contenu côté serveur reste nécessaire avant d’accepter un véritable téléversement.
L’exemple natif ci-dessous charge Source Sans 3 aux graisses 400 et 600, monte React dans un élément racine explicite et utilise styled-components via la bibliothèque. Incluez tslib explicitement : les modules ESM de la version 18.0.0 importent ses fonctions utilitaires, et une compilation vierge a échoué sans cette dépendance. La configuration épinglée ci-dessous inclut la dépendance d’exécution manquante et les fichiers de police. Aucun fournisseur de thème supplémentaire n’est nécessaire pour cet exemple utilisant le thème par défaut.
Consultez la spécification associée
Le guide de styles officiel présente suomifiDesignTokens.spacing et suomifiDesignTokens.colors. L’exemple ci-dessous utilise ces chemins d’exportation pour un conteneur personnalisé ; il ne remplace pas l’implémentation interne de FileInput.
import { suomifiDesignTokens } from 'suomifi-design-tokens';
// Real exported token paths. Use values instead of copying README example numbers.
const attachmentStyle = {
maxWidth: 600,
padding: suomifiDesignTokens.spacing.m,
borderColor: suomifiDesignTokens.colors.highlightBase
};Conservez un champ de saisie de fichier natif utilisable au clavier, même si la zone de dépôt est mise en évidence. Associez son aide et son erreur à l’aide de aria-describedby. Annoncez les changements de sélection et la suppression sans relire toute la page. Si un formulaire peut contenir plusieurs boutons de suppression, chacun doit désigner le fichier sélectionné correspondant.
La propriété officielle smallScreen propose une présentation compacte. Elle ne définit pas de point de rupture global. Cet aperçu indépendant applique un ajustement de marge intérieure propre à l’application à 480 px, tout en conservant un corps de texte de 18 px. Testez les noms de fichiers longs, le zoom et les libellés traduits ; faites passer les noms de fichiers à la ligne sans élargir toute la page.
La démo ne lit pas le contenu des documents et n’envoie aucune requête. Le nom du fichier sélectionné et sa taille en octets ne prouvent pas qu’un document est valide, stocké ou accepté. Les véritables services doivent prévoir une validation côté serveur, la progression du téléversement, la reprise après échec, des règles de conservation et une confirmation liée à une réponse réelle.
Le code du composant est sous licence MIT. Cette licence ne permet pas à un projet indépendant de se présenter comme un service du gouvernement finlandais ni d’utiliser une identité institutionnelle protégée. Utilisez un nom de projet neutre pour vos essais et demandez les directives de marque appropriées pour toute mise en œuvre officielle.
Chemins d’exportation vérifiés pour l’espacement et les couleurs d’un conteneur personnalisé.
import { suomifiDesignTokens } from 'suomifi-design-tokens';
// Real exported token paths. Use values instead of copying README example numbers.
const attachmentStyle = {
maxWidth: 600,
padding: suomifiDesignTokens.spacing.m,
borderColor: suomifiDesignTokens.colors.highlightBase
};Interprétation locale complète. Les limites de type PDF et de taille sont propres au scénario ; aucun téléversement n’a lieu.
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Attachment example</title><style>*{box-sizing:border-box}body{margin:0;padding:30px 20px;font:18px/1.5 Arial,sans-serif;color:#202020;background:#fff}main{max-width:600px;margin:auto}h1{font-size:32px;line-height:1.2;font-weight:400;margin:0 0 20px}p{margin:0 0 20px}label{font-weight:600;display:block}small{display:block;font-size:16px}.drop{margin-top:15px;border:2px dashed hsl(212,63%,45%);padding:30px;text-align:center;background:hsl(212,63%,90%)}button,input::file-selector-button{font:600 18px Arial;padding:12px 20px;border:1px solid hsl(212,63%,37%);border-radius:2px;background:hsl(212,63%,45%);color:white;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #202020;outline-offset:3px}input{width:100%;font-size:16px;margin:15px 0}input::file-selector-button{margin-right:10px}.file{border:1px solid #777;padding:20px;margin:20px 0;overflow-wrap:anywhere}.file button{margin-top:15px;background:white;color:hsl(212,63%,37%)}#error{color:#a32020;font-weight:bold}footer{font-size:14px;margin-top:30px;border-top:1px solid #ccc;padding-top:15px}[hidden]{display:none!important}@media(max-width:480px){body{padding:20px 15px}.drop{padding:20px}h1{font-size:28px}}</style><main><small>COMMUNITY WORKSHOP · ATTACHMENT</small><h1>Add your project outline</h1><p>Choose one PDF up to 5 MB. This local example checks file metadata; it does not read or send the document.</p><div id="picker"><label for="file">Project outline</label><small id="hint">One PDF file. Maximum 5 MB (5,000,000 bytes).</small><input id="file" type="file" accept=".pdf,application/pdf" aria-describedby="hint error"><div class="drop" id="drop">Or drop one PDF here</div></div><p id="error" role="alert" hidden></p><section id="selected" class="file" hidden aria-label="Selected attachment"><strong id="name"></strong><small id="size"></small><button id="remove" type="button">Remove file</button></section><p id="status" role="status">No file selected.</p><footer>OpenDesign interpretation of the Suomi.fi attachment pattern. Arial fallback; no official identity or React component runtime. PDF and 5 MB are example rules.</footer></main><script>const input=document.querySelector('#file'),picker=document.querySelector('#picker'),selected=document.querySelector('#selected'),error=document.querySelector('#error'),status=document.querySelector('#status');function choose(files){error.hidden=true;if(files.length!==1){error.textContent='Choose exactly one file.';error.hidden=false;input.value='';return}const file=files[0];if(!/\.pdf$/i.test(file.name)||file.size>5000000){error.textContent='Choose a PDF no larger than 5 MB.';error.hidden=false;input.setAttribute('aria-invalid','true');input.value='';return}input.removeAttribute('aria-invalid');document.querySelector('#name').textContent=file.name;document.querySelector('#size').textContent=file.size.toLocaleString('en')+' bytes · selected locally';document.querySelector('#remove').setAttribute('aria-label','Remove '+file.name);picker.hidden=true;selected.hidden=false;status.textContent='Selected file: '+file.name;document.querySelector('#remove').focus()}input.addEventListener('change',()=>{if(input.files.length)choose(input.files)});document.querySelector('#drop').addEventListener('dragover',e=>e.preventDefault());document.querySelector('#drop').addEventListener('drop',e=>{e.preventDefault();choose(e.dataTransfer.files)});document.querySelector('#remove').onclick=()=>{input.value='';picker.hidden=false;selected.hidden=true;error.hidden=true;input.removeAttribute('aria-invalid');status.textContent='File removed. Choose another file.';input.focus()};</script></html>Enregistrez sous main.jsx. Ces trois fichiers reproduisent ensemble l’exemple natif React à l’aide des commandes de configuration.
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { FileInput } from 'suomifi-ui-components';
import '@fontsource/source-sans-3/400.css';
import '@fontsource/source-sans-3/600.css';
import './app.css';
function App() {
const [value, setValue] = useState([]);
const [error, setError] = useState('');
function change(files) {
const next = Array.from(files);
const invalid = next.length > 1 || next.some(file => !/\.pdf$/i.test(file.name) || file.size > 5000000);
if (invalid) {
setValue([]);
setError('Choose one PDF no larger than 5 MB.');
return;
}
setValue(next.map(file => ({ file })));
setError('');
}
return <main><h1>Select a workshop document</h1><p>This local example does not upload or read the document.</p>
<FileInput id="document" labelText="Workshop document" hintText="One PDF, maximum 5 MB (5,000,000 bytes)."
inputButtonText="Choose PDF" dragAreaText="or drop a PDF here" removeFileText="Remove file"
addedFileAriaText="Selected file" accept=".pdf" value={value} onChange={change}
status={error ? 'error' : 'default'} statusText={error} />
<p role="status">{value.length ? `${value[0].file.name} selected locally.` : 'No file selected.'}</p>
</main>;
}
createRoot(document.getElementById('root')).render(<App />);
Enregistrez sous app.css. Ces trois fichiers reproduisent ensemble l’exemple natif React à l’aide des commandes de configuration.
body{margin:0;font:18px/1.5 'Source Sans 3',sans-serif;color:#292929;background:#fff}main{max-width:600px;margin:0 auto;padding:24px}h1{font-size:32px;line-height:1.2}*{box-sizing:border-box}
Enregistrez sous index.html. Ces trois fichiers reproduisent ensemble l’exemple natif React à l’aide des commandes de configuration.
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Native Suomi.fi FileInput</title><link rel="stylesheet" href="./app.css"><div id="root"></div><script type="module" src="./app.js"></script></html>
Cette configuration compile l’exemple natif React ci-dessous, avec les fichiers de police Source Sans 3 locaux. Tests effectués avec un format non valide, une sélection valide, la suppression intégrée et un PDF trop volumineux, à 390 px et 1 440 px. L’archive ZIP d’aperçu téléchargeable existante est l’interprétation distincte HTML/CSS ; son README reste exact.
npm install --save-exact [email protected] [email protected] [email protected] [email protected] [email protected] @fontsource/[email protected] npm install --save-dev --save-exact [email protected] # Save main.jsx, app.css and index.html from the complete examples below. npx esbuild main.jsx --bundle --outdir=dist --entry-names=app --loader:.woff=copy --loader:.woff2=copy cp index.html dist/index.html python3 -m http.server 8080 --directory dist # Open http://localhost:8080
Utilisez l’exemple natif Suomi.fi FileInput 18.0.0 React fourni, avec Source Sans 3 et les dépendances d’exécution épinglées, dont tslib. Contrôlez value sous la forme d’un tableau d’objets { file } et recevez directement la FileList dans onChange ; ne lisez pas event.target dans ce rappel. Vérifiez le format et la taille avant d’accepter une sélection locale, gérez la liste vide émise lors de la suppression et gardez les textes d’aide et d’erreur visibles. Présentez l’aperçu intégré HTML comme une interprétation distincte clairement signalée. Aucune des deux implémentations ne téléverse de fichier ; la validation côté serveur, la progression et la confirmation du stockage nécessitent un véritable contrat de service côté serveur.L’aperçu intégré et l’archive ZIP téléchargeable constituent une interprétation OpenDesign HTML/CSS. L’exemple complet distinct React utilise suomifi-ui-components 18.0.0 et les contrats vérifiés de value et onChange de FileInput. Les deux exemples gèrent la sélection locale de fichiers ; aucun ne téléverse ni ne stocke un document sur un serveur.
