---
title: Note de version 1.8
shortTitle: Note de version 1.8
description: Cette page présente les nouveautés et évolutions apportées par la version 1.8 du Design Système de l\'État ainsi que les correctifs techniques intégrés dans les outils de conception et le code
shortDescription: Nouveautés et évolutions de la version 1.8
keywords: design système, version 1.8, composants, formulaire, figma, sketch, accessibilité, correctifs, documentation, DSFR
excerpt: Découvrez les ajouts, évolutions et correctifs introduits dans la version 1.8 du Design Système de l\'État côté design et code
summary: La version 1.8 apporte de nouveaux composants comme le bloc de transcription et des modèles de pages prêts à l\'emploi. Elle améliore plusieurs composants existants dans les bibliothèques Figma et Sketch ainsi que dans le code source. De nombreux correctifs d\'accessibilité et de compatibilité ont été intégrés. Cette page détaille aussi les évolutions structurelles du système de formulaire et les nouvelles capacités de l’API.
toc: 2
version: '1.8'
---

# Note de version 1.8

## Général

La version 1.8.5 est disponible depuis le 28 novembre 2022

[Code en version 1.8.5](https://github.com/GouvernementFR/dsfr/releases/tag/v1.8.5)

La version 1.8.4 est disponible depuis le 15 novembre 2022

[Code en version 1.8.4](https://github.com/GouvernementFR/dsfr/releases/tag/v1.8.4)

La version 1.8.3 est disponible depuis le 15 novembre 2022

[Code en version 1.8.3](https://github.com/GouvernementFR/dsfr/releases/tag/v1.8.3)

La version 1.8.2 est disponible depuis le 9 novembre 2022

[Code en version 1.8.2](https://github.com/GouvernementFR/dsfr/releases/tag/v1.8.2)

La version 1.8.1 est disponible depuis le 27 octobre 2022

[Code en version 1.8.1](https://github.com/GouvernementFR/dsfr/releases/tag/v1.8.1)

La version 1.8.0 est disponible depuis le 27 octobre 2022

[Code en version 1.8.0](https://github.com/GouvernementFR/dsfr/releases/tag/v1.8.0)

### Nouveauté(s)

- 🎉 Ajout du composant Transcription + ajout de ce composant dans Contenu média et Gestionnaire de consentement.
- 🎉 Ajout des modèles (création de compte, connexion et page d’erreur)
- 🎉 Ajout des blocs de formulaires (date de naissance, civilité, adresse, etc.)

### Évolution(s)

- ✨ Évolution du composant Tuile (Bêta UI).
- ✨ Évolution du composant Contenu média.

## Librairie Sketch

### 🎨 Fondamentaux

- 🎉 Ajout des icônes fullscreen-fill et fullscreen-line dans la catégorie Média de la librairie d’icônes.
- 🎉 Ajout du style de texte du composant Transcription.
- ✨ Evolution des styles de texte des composants Bouton radio, Case à cocher et Champ de saisie.

### 🧩 Composants

### Boutons

- 🎉 Ajout des boutons tertiaires sans contour.
- 🎉 Ajout du bouton tertiaire dans le composant Groupe de boutons.

### Contenu média

- ✨ Evolution : 3 tailles de média disponibles ; 6, 8, ou 10 colonnes en desktop et 10, 12 ou 100% en mobile. Ajout d’une zone de détails comprenant un texte de description/source, un lien et un bloc de transcription, disponible en taille 6 ou 8 colonnes en desktop et 12 colonnes en mobile.

### Tuiles

- ✨ Evolution du composant Tuile (Bêta) : maintenant disponible en taille SM et MD avec ou sans pictogramme. Ajout d\'éléments optionnels ; badge, détail, description.

## Librairie Figma

### 🎛️ Outils

- 🛠️ Modification des en-têtes de présentation des composants. Ils précisent désormais si les composants sont fait pour mobile, desktop ou les deux.

### 🎨 Fondamentaux

- 🎉 Ajout des icônes fullscreen-fill et fullscreen-line dans la catégorie Média de la librairie d’icônes.

### 🧩 Composants

### Contenu média

- ✨ Evolution : 3 tailles de média disponibles ; 6, 8, ou 10 colonnes en desktop et 10, 12 ou 100% en mobile. Ajout d’une zone de détails comprenant un texte de description/source, un lien et un bloc de transcription, disponible en taille 6 ou 8 colonnes en desktop et 12 colonnes en mobile.

### Tuiles

- ✨ Evolution du composant Tuile (Bêta) : maintenant disponible en taille SM et MD avec ou sans pictogramme. Ajout d\'éléments optionnels ; badge, détail, description.

### Formulaires

> [!NOTE]
> Si vous aviez inséré des formulaires dans vos conceptions avant la mise à jour 1.8.0, celles-ci seront toujours visibles dans leur état 1.7.0.Pour mettre à jour vos conceptions à la version 1.8.0, il faudra refaire les liens des anciens composants vers les nouveaux(Boutons radio, Boutons radio riches, Case à cocher, Champ de saisie, Liste déroulante).

- 🛠️ Factorisation des formulaires.
- 🎉 Ajout d’une page présentant des composants spécifiques aux formulaires.
- 🎉 Ajout du composant Label
- 🎉 Ajout du composant Légende
- 🎉 Ajout du composant Message de formulaire

### Bouton radio

- 🎉 Ajout des versions Erreur et Valide du composant individuel et des groupes.
- 🎉 Ajout des sections
- 🛠️ Amélioration de la nomenclature.

### Bouton radio riche

- 🎉 Ajout des versions Erreur et Valide du composant individuel et des groupes.
- 🎉 Ajout des sections
- 🛠️ Amélioration de la nomenclature.

### Champ de saisie

- 🎉 Ajout des versions Erreur et Valide du composant individuel et des groupes.
- 🎉 Ajout des sections
- 🛠️ Amélioration de la nomenclature.

### Case à cocher

- 🎉 Ajout des versions Erreur et Valide du composant individuel et des groupes.
- 🎉 Ajout des sections
- 🛠️ Amélioration de la nomenclature.

### Menu déroulant

- 🎉 Ajout des versions Erreur et Valide du composant individuel et des groupes.
- 🎉 Ajout des sections
- 🛠️ Amélioration de la nomenclature.

### Groupe de bouton

- 🎉 Ajout d’un troisième bouton dans une variante tertiaire par défaut dans les groupes de bouton

## Code

::fr-button[[Téléchargez le zip](https://github.com/GouvernementFR/dsfr/releases/download/v1.8.5/dsfr-v1.8.5.zip)]{kind=2}

### Version 1.8.5

#### Tag - Tag

- 🛠️ Correction d\'une régression sur les tags avec une ancre

#### Transcription - Transcription

- 🛠️ Correction de la pleine largeur du composant

### Version 1.8.4

#### Bouton - Button

- 🛠️ Correction d\'une régression sur les icônes placées à droite

#### Pied de page - Footer

- 🛠️ Correction d\'une régression sur le séparateur bleu

#### Transcription - Transcription

- 🛠️ Correction title de la modale de transcription cachée en mode accordéon

### Version 1.8.2

- 🛠️ Correctifs d\'accessibilité sur le titre des cartes de téléchargement
- 🛠️ Correctifs d\'accessibilité sur le focus des tags supprimables
- 🛠️ Correctifs d\'accessibilité sur le composant transcription
- 🛠️ Correction de l\'effet flash lors du rafraichissement d\'une page présentant le dark mode et prise des paramètres système.
- 🛠️ Correction sur le bouton paramètre d\'affichage.
- ✨ Évolution de la fonction getcolor afin de retourner les couleurs de hover
- ✨ Ajout de l\'autocomplete dans les blocs de formulaire

### Version 1.8.0

### 🎨 Fondamentaux

#### Grille - grid

- 🛠️ Suppression du scroll horizontal généré par les `fr-container--fluid` en mobile, overflow hidden

#### Pictogrammes - pictogram

- 🎉 Ajout de nouveaux pictogrammes et restructuration en sous dossier par catégorie (comme icons)

### 🧩 Composants

#### Accordéon

- 🛠️ Correction token de couleur actif

#### Alerte - Alert

- ✨ le titre devient un h3 par défaut

#### Formulaire - Form

- ✨ Evolution du système de formulaire (fieldset, fieldset__element)Le fr-fieldset__content est dépréciéChaque élément de formulaire doit être contenu dans un fr-fieldset__element
- ✨ Evolution du système de messages de statut, maintenant contenus dans un block fr-messages-group :
  - le message d’erreur : fr-message--error ( fr-text-error est déprécié )
  - le message d’information : fr-message--info
  - le message de validation : fr-message--valid ( fr-text-valid est déprécié )

#### Bouton radio - Radio

- ✨ Evolution du groupe de radio pour utiliser le nouveau système de formulaire (voir form)

#### Carte - Card

- ✨ le titre devient un h3 par défaut

#### Case à cocher - Checkbox

- ✨ Evolution du groupe de checkbox pour utiliser le nouveau système de formulaire (voir form)

#### Bouton FranceConnect - Connect

- 🛠️ Correction du wording “Qu’est-ce que France Connect ?”

#### Champ de saisie - Input

- ✨ Evolution du groupe de champ de saisi pour utiliser le nouveau système de formulaire (voir form)

#### Contenu Media - Content

- ✨ Evolution du composant media vidéo maintenant imbriqué dans un figure pour plus d’homogénéité avec le média image.
- ✨ Evolution du composant via la possibilité d’ajouter un lien dans le figcaption
- ✨ Evolution du composant via l’ajout du composant transcription à la place du bouton vers la transcription

#### Gestionnaire de consentement - Consent

- ✨ Evolution du composant via l’ajout du composant transcription à la place du bouton vers la transcription

#### Indicateur d\'étape - Stepper

- ✨ le titre devient un h2 par défaut

#### Lettre d\'information et Réseaux Sociaux - follow

- ✨ le titre de la newsletter et du bloc socials deviennent un h3 par défaut

#### Menu latéral - Sidemenu

- ✨ Le aria label sur le `<nav>` devient un aria-labelledBy pointant vers l\'id du titre
- 🛠️ Correction de l’affichage en position sticky sur Firefox

#### Mise en avant - Callout

- ✨ le titre devient un h3 par défaut

#### Mot de passe - password

- 🎉 Ajout du composant mot de passe

#### Onglets - tab

- 🛠️ Correction de l’affichage d’une modale à l’intérieur d’un onglet

#### Pied de page - Footer

- 🛠️ Correction de l’alignement du logo en haut
- 🛠️ La bordure supérieur bleue passe à l’intérieur

#### Sommaire - Summary

- ✨ le titre devient un h2 par défaut

#### Transcription - Transcription

- 🎉 Ajout du composant de transcription

#### Tag - Tag

- 🛠️ Correction tag sélectionnable hover

#### Tuile - Tile

- ✨ le titre devient un h3 par défaut

### Modèles de pages

#### Page d’erreur - Response

- 🛠️ Correction du snippet de code (grille et utilitaires d’espacements)
- 🛠️ Mise à jour du chemin vers le pictogramme

#### Page liées au compte - Account

##### Connexion - Login

- 🎉 Ajout du modèle de connexion (avec et sans erreur)

##### Création de compte - register

- 🎉 Ajout du modèle de création de compte
- 🎉 Ajout du modèle de création de compte en 3 étapes (identifiants, identité, coordonnées)
- 🎉 Ajout de modèles de confirmation de création et de validation de compte

##### Récupération, Mot de passe oublié - recovery

- 🎉 Ajout du modèle de récupération de mot de passe
- 🎉 Ajout du modèle de confirmation de demande de récupération

### Blocs fonctionnels (patterns)

- 🎉 Modèle de bloc de civilité (civility)
- 🎉 Modèle de bloc de nom et prénom (name)
- 🎉 Modèle de date unique (date)
- 🎉 Modèle de formulaire d\'adresse (address)
- 🎉 Modèle de formulaire société (company)
- 🎉 Modèle de formulaire de nationalité (nationality)

### API

- 🎉 Ajout de la classe publique colors et de la méthode `getColors(context, use, tint, {options})` sur l’API du DSFR
- 🎉 Ajout de l’event scheme sur l’attribut data-fr-theme

### Documentation

- 🛠️ Mise à jour des url vers le site de documentation des pages examples
