Composants
Bibliothèque de composants
مكتبة المكونات
56 composants accessibles, trilingues et compatibles RTL, prêts à composer des services publics numériques.
Mise en page
5- Bandeau officielشريط الموقع الرسميUne fine bande d'identité au-dessus de l'en-tête, qui rappelle qu'il s'agit d'un site officiel et explique, à la demande, comment le reconnaître (domaine gov.ma, connexion sécurisée).
- Bloc de suiviكتلة المتابعةLe bloc de suivi associe une inscription à la lettre d'information et des liens vers les réseaux sociaux officiels, sur une bande de fond neutre — typiquement au-dessus du pied de page.
- Bloc marqueالشعار المؤسسيLe bloc marque associe l'emblème du Royaume, le nom trilingue de l'État et, en option, le nom de l'entité (ministère, direction, opérateur) qui porte le service. Il identifie l'origine officielle d'une page dans l'en-tête comme dans le pied de page.
- En-têteالترويسةL'en-tête identifie le site, expose la recherche et l'accès au compte, et porte la navigation principale — y compris les méga-menus pour les rubriques riches. Il gère lui-même son adaptation mobile (tiroir de navigation) et l'ouverture de la recherche.
- Pied de pageتذييل الصفحةLe pied de page rappelle l'identité de l'entité, relie vers l'écosystème des sites officiels et regroupe les liens secondaires (mentions légales, accessibilité, contact). Il porte aussi les réseaux sociaux et la licence des contenus.
Actions
5- Bascule de thèmeمبدل السمةLe sélecteur de thème permet de choisir un affichage clair, sombre ou aligné sur les préférences système. Le choix est mémorisé et appliqué avant l'affichage de la page, pour éviter tout scintillement au chargement.
- BoutonزرLe bouton déclenche une action immédiate — envoyer, enregistrer, confirmer — ou reproduit un lien lorsqu'on lui fournit un élément à rendre. Ses variantes, tailles et états permettent de hiérarchiser les actions d'un écran sans changer de composant.
- ÉtiquetteوسمUne petite étiquette en pilule, utilisée seule, en lien, comme filtre activable (`selectable`) ou comme critère amovible (`dismissible`) dans une liste de filtres actifs.
- LienرابطDeux liens de contenu : `TextLink` pour un lien de texte courant (interne ou externe, avec repère de nouvelle fenêtre), et `DownloadLink` pour un document téléchargeable avec son format et sa taille.
- PartageمشاركةLe partage propose des raccourcis vers X, Facebook, LinkedIn, l'e-mail et la copie du lien courant — typiquement en fin d'article, de communiqué ou de fiche démarche.
Formulaires
11- Barre de rechercheشريط البحثFormulaire de recherche autonome avec bouton d'envoi, bouton d'effacement et état de chargement. Pensé pour les pages d'accueil de portails de services, où la recherche est l'action principale plutôt qu'un élément secondaire du header.
- Bouton radioزر اختيارSélection exclusive d'une option parmi plusieurs, derrière une légende commune. La variante « card » transforme chaque option en bloc bordé et cliquable, utile quand chaque choix mérite une description plus longue.
- Case à cocherخانة اختيارCase à cocher accessible avec libellé et aide intégrés, et son pendant en groupe `CheckboxGroup` pour une sélection multiple derrière une légende commune. L'état indéterminé permet de représenter une sélection partielle d'un groupe.
- ChampحقلLe champ associe une étiquette, une aide et un message d'erreur à un contrôle de saisie (Input, Select, Textarea…). Il gère l'astérisque d'obligation, la mention « facultatif » et le lien accessible entre le libellé, l'aide et l'erreur. `Fieldset` fait le même travail pour un groupe de contrôles derrière une légende native.
- Champ de texteحقل نصيContrôle de saisie de texte natif partagé par tous les formulaires du DSM : bordure, focus, états invalide et désactivé sont cohérents entre `Input`, `Textarea` et `PasswordInput`. Icônes et affixes textuels (« MAD », « +212 ») s'insèrent sans casser l'alignement du texte.
- Code de vérificationرمز التحققSaisie segmentée d'un code de vérification à usage unique (SMS, e-mail ou identité numérique). Chaque chiffre occupe sa propre case, avec navigation automatique et prise en charge du collage d'un code complet.
- Dépôt de fichierإيداع ملفZone de dépôt pour joindre un ou plusieurs justificatifs à une démarche : glisser-déposer ou sélection classique, avec la liste des fichiers choisis, leur taille et un bouton de retrait. L'aide sur les formats et la taille maximale se génère automatiquement à partir de `accept` et `maxSizeMb`.
- Identifiants nationauxالمعرفات الوطنيةUn champ pour les identifiants que demandent les démarches marocaines — CNIE, ICE, RIB, téléphone — qui filtre les caractères, met en forme pendant la saisie et valide la structure (et la clé du RIB). Les fonctions de validation sont exportées séparément pour le serveur.
- Interrupteurمفتاح تبديلBascule immédiate d'un réglage entre deux états (activé/désactivé). Contrairement à une case à cocher, l'interrupteur suggère un effet instantané plutôt qu'une sélection à valider avec le reste d'un formulaire.
- Liste déroulanteقائمة منسدلةSélection d'une valeur unique parmi une liste, avec un déclencheur au style des champs de texte et un menu accessible au clavier. Les options peuvent être regroupées et porter une description secondaire. `NativeSelect` couvre les cas simples qui n'ont pas besoin de description ni de regroupement.
- Saisie de dateإدخال التاريخSaisie d'une date en trois champs numériques distincts (jour, mois, année), à la manière du GOV.UK Design System. Plus robuste qu'un sélecteur calendrier sur mobile ou pour une date passée éloignée (date de naissance), et immédiatement lisible sans dépendre d'un format implicite.
Contenu
13- AccordéonالأكورديونL'accordéon regroupe plusieurs panneaux de contenu repliables sous un intitulé cliquable — questions fréquentes, détails d'une démarche, pièces justificatives par catégorie. Un seul panneau ou plusieurs peuvent être ouverts à la fois.
- Avatarالصورة الرمزيةL'avatar représente une personne ou un agent : photo si disponible, sinon initiales sur un fond de couleur douce choisi de façon stable à partir du nom. `AvatarGroup` superpose plusieurs avatars, par exemple les agents affectés à un dossier.
- CarteبطاقةLa carte présente un contenu autonome — démarche, institution, actualité — avec un titre, un court texte et une action. Elle se compose librement à partir de sous-composants (média, corps, titre, texte, badges, pied) selon le besoin.
- Carte de téléchargementبطاقة تنزيلLa carte de téléchargement présente un document à télécharger — formulaire, circulaire, rapport — avec son format, sa taille et sa date de mise à jour. Toute la carte est cliquable.
- Carte du Marocخريطة المغربLa carte des douze régions du Royaume, territoire entier, sous forme de SVG accessible : sélecteur de région, carte choroplèthe pour des chiffres par région, repères (agences, centres d'accueil) avec fenêtre contextuelle, ou simple illustration. Les noms de régions existent dans les quatre locales.
- Chiffre cléرقم رئيسيLe chiffre clé met en avant une statistique isolée — taux, montant, volume — avec sa légende et, en option, une tendance. Regroupé dans un `KeyFigureGrid`, il compose un tableau de bord synthétique séparé par des filets.
- Chronologieالخط الزمنيLa chronologie affiche une suite d'étapes datées — historique d'une démarche, jalons d'un projet — le long d'un fil vertical, avec un marqueur distinct pour les étapes terminées, en cours et à venir.
- CitationاقتباسLa citation met en valeur un témoignage ou une déclaration attribuée — retour d'un usager, propos d'un responsable public — avec un filet de début et un guillemet typographique en vert.
- Encadréإطار تنبيهيL'encadré met en avant une information éditoriale importante à l'intérieur d'un contenu — une précision utile, une invitation à agir, un rappel réglementaire. Contrairement à l'alerte, il n'exprime pas un état du système mais une mise en avant volontaire de l'auteur.
- Mise en exergueنص مُبرزLa mise en exergue signale un paragraphe important à l'intérieur d'un contenu long — une définition, une clé de lecture, un chiffre marquant — grâce à un simple filet de 4 px sans changement de fond.
- TableauجدولLe tableau présente des données structurées en lignes et colonnes — indicateurs, listes de démarches, résultats de recherche. Il défile horizontalement sur petit écran et prend en charge le tri, le zébrage, l'affichage compact et l'en-tête figé.
- Transcriptionنص مكتوبLa transcription affiche, sous forme repliable, le texte intégral d'un contenu audio ou vidéo — webinaire, allocution, capsule explicative — pour en garantir l'accessibilité et la consultation hors ligne.
- TuileبلاطةLa tuile est un lien enrichi vers une démarche, une rubrique ou une institution, avec une icône dans un cadre en arche ou une image. Toute la surface de la tuile est cliquable.
Retours & statut
9- AlerteتنبيهL'alerte signale un état du système ou le résultat d'une action : information, succès, avertissement ou erreur. Elle est autoportée et doit rester compréhensible même détachée de son contexte visuel.
- BadgeشارةLe badge affiche un statut, une catégorie ou une métadonnée courte à côté d'un contenu — l'état d'une demande, le coût d'une démarche, une étiquette d'institution. Il n'est jamais interactif et ne doit jamais être le seul moyen de comprendre une information.
- Bandeau d'informationشريط إخباريUn bandeau pleine largeur, placé sous l'en-tête, pour une information valable pour tout le site : maintenance programmée, nouveau service, incident en cours.
- Barre de progressionشريط التقدمLa barre de progression indique l'avancement mesurable d'une tâche longue : envoi de pièces, instruction d'un dossier, import de fichiers. Utilisez l'état indéterminé quand la durée n'est pas connue à l'avance.
- État videحالة فارغةL'état vide remplace une liste, une recherche ou un tableau de bord quand il n'y a rien à afficher. Il explique la situation et propose, quand c'est utile, une action pour en sortir.
- Indicateur de chargementمؤشر التحميلLe spinner signale une attente courte et de durée inconnue : chargement d'une page, vérification d'un champ, action en cours dans un bouton.
- Notification temporaireإشعار مؤقتLa notification temporaire confirme le résultat d'une action (envoi, copie, erreur réseau) sans interrompre le parcours. Elle disparaît d'elle-même et reste consultable au clavier via la touche F6.
- Squelette de chargementهيكل التحميلLe squelette occupe la forme du contenu à venir pendant son chargement, pour réduire la sensation d'attente et éviter les sauts de mise en page.
- Suivi de dossierتتبع الملفLa carte de suivi d'une demande administrative : référence copiable, statut dans un vocabulaire commun (déposé, en instruction, action requise, accepté, refusé, prêt), progression dans les étapes, délai estimé et prochaine action pour l'usager.
Superpositions
5- Bandeau de consentementشريط الموافقة على الكوكيزLa demande de consentement aux cookies, ancrée en bas de la fenêtre. Trois actions à poids égal aux yeux du visiteur : tout accepter, tout refuser, ou personnaliser.
- Fenêtre contextuelleنافذة سياقيةLa fenêtre contextuelle affiche un contenu riche (texte, filtres, mini-formulaire) ancré à un déclencheur, sans quitter la page. Contrairement à l'infobulle, elle reste accessible au clic et au clavier.
- Fenêtre modaleنافذة منبثقةLa fenêtre modale interrompt le parcours pour demander une confirmation, afficher un formulaire court ou un récapitulatif. `AlertDialog` couvre le cas particulier d'une confirmation destructive.
- InfobulleتلميحةL'infobulle affiche un texte d'appoint au survol ou au focus d'un élément, généralement une icône ou une action condensée. Elle est purement visuelle et ne doit jamais porter une information indispensable.
- Panneau latéralلوحة جانبيةLe panneau latéral glisse depuis un bord de l'écran pour afficher un menu, des filtres ou un contenu secondaire, sans quitter la page. Il se ferme au balayage, au clic sur le fond ou avec la touche Échap.