Boutons radio riches - Radio buttons extended
Les boutons radio riches permettent de sélectionner un choix parmi une liste d’options illustrées. À la différence du bouton radio simple, l’image permet d’illustrer et d’accompagner l’utilisateur dans son choix.
Structure
Un bouton radio riche est composé :
- D'un bouton radio - obligatoire
- D’un label - obligatoire
- D’un séparateur - obligatoire
- D’une image - obligatoire
- D’une description - optionnelle
- Un message d’erreur - obligatoire si un changement d'état doit être notifié à l’utilisateur.
La largeur du bouton peut-être définie selon la grille :link: proposée par le Système de Design de l’État.
<div class="fr-form-group">
<fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend" id='radio-rich-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-1" name="radio-rich">
<label class="fr-label" for="radio-rich-1">Label radio
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-2" name="radio-rich">
<label class="fr-label" for="radio-rich-2">Label radio
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-3" name="radio-rich">
<label class="fr-label" for="radio-rich-3">Label radio
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</fieldset>
</div>
Comme les boutons radio, les boutons radios riche sont à utiliser en groupe en respectant les espacements définis ci-dessous (en savoir plus sur les espacements).
<div class="fr-form-group">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend class="fr-fieldset__legend" id='radio-rich-inline-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-inline-1" name="radio-rich-inline">
<label class="fr-label" for="radio-rich-inline-1">Label radio
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-inline-2" name="radio-rich-inline">
<label class="fr-label" for="radio-rich-inline-2">Label radio
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-inline-3" name="radio-rich-inline">
<label class="fr-label" for="radio-rich-inline-3">Label radio
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</fieldset>
</div>
Bouton radio riche avec description
Les boutons radio riches peuvent également afficher un texte de description en ajoutant un <span class="fr-hint-text" id="radio-rich-1-desc-hint">Texte descriptif</span> dans la balise </label> comme indiqué ci-dessous.
<div class="fr-form-group">
<fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend">
Légende pour l’ensemble de champs
<span class="fr-hint-text">texte additionel</span>
</legend>
<div class="fr-fieldset__content">
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-hint-1" name="radio-rich-hint">
<label class="fr-label" for="radio-rich-hint-1">Label radio
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-hint-2" name="radio-rich-hint">
<label class="fr-label" for="radio-rich-hint-2">Label radio
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-hint-3" name="radio-rich-hint">
<label class="fr-label" for="radio-rich-hint-3">Label radio
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</fieldset>
</div>
État d'erreur
L'état d’erreur est signalé par l’affichage d’une ligne rouge et d'un message d’erreur en-dessous du composant (cf. couleurs fonctionnelles :link: : le rouge est la couleur de l’état erreur).
Pour les développeurs
Pour l'état d’erreur, il est nécessaire d’ajouter un role=”group” à la balise fieldset. De plus, le message d’erreur et la balise legend sont liés au fieldset via l’attribut aria-labelledby.
<div class="fr-form-group">
<fieldset class="fr-fieldset fr-fieldset--inline fr-fieldset--error" aria-labelledby="radio-rich-error-inline-legend radio-rich-error-inline-desc-error" role="group">
<legend class="fr-fieldset__legend" id='radio-rich-error-inline-legend'>
Légende pour l’ensemble de champs
<span class="fr-hint-text">texte additionel</span>
</legend>
<div class="fr-fieldset__content">
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-error-inline-1" name="radio-rich-error-inline">
<label class="fr-label" for="radio-rich-error-inline-1">Label radio
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-error-inline-2" name="radio-rich-error-inline">
<label class="fr-label" for="radio-rich-error-inline-2">Label radio
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
<div class="fr-radio-group fr-radio-rich">
<input type="radio" id="radio-rich-error-inline-3" name="radio-rich-error-inline">
<label class="fr-label" for="radio-rich-error-inline-3">Label radio
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-radio-rich__img">
<img src="./img/placeholder.1x1.png" alt="" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
<p id="radio-rich-error-inline-desc-error" class="fr-error-text">
Texte d’erreur obligatoire
</p>
</fieldset>
</div>
Responsive
En mobile , les composants bouton radio riche s’affichent automatiquement les uns en dessus des autres. L’espacement à respecter entre chaque boutons est de 2W (voir la documentation Espacement).
Règles d’utilisation
Les règles d’utilisation du bouton radio riches sont identiques à celles déjà explicité sur les boutons radio.
Personnalisation
Le style de ce composant n’est pas personnalisable. Toutefois, certains éléments sont optionnels - voir la structure du composant.
Besoin d'aide ?
L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :
- la communauté slack pour poser vos questions, et échanger avec d’autres utilisateurs.
Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant ! - le centre de support pour envoyer vos demandes de correctifs et d'évolution.