Contrôle segmenté (Segmented)

Utilisez le contrôle segmenté pour choisir rapidement une valeur dans une liste courte.

attention

Ce composant nécessite une licence Pro valide en production.

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:segmented

Usage

• Réservez ce composant aux listes de choix courtes.
• Chaque option doit avoir une valeur stable.

Modes d'utilisation

Exemple principal

Contrôle segmenté · exemple principal

<twig:dsfr:segmented id="period" legend="Période" name="period" :options="[
  {value: 'day', label: 'Jour', checked: true},
  {value: 'week', label: 'Semaine'},
  {value: 'month', label: 'Mois'}
]" />

Données

La prop options accepte un tableau PHP/Twig. En Twig, préfixez la prop par : pour transmettre une vraie structure de données.

Syntaxe typée Twig Component

{# Le préfixe : garde le type tableau/booléen/numérique. #}
<twig:dsfr:segmented :options="options" />

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:segmented
  id="controle-segmente-example"
  class="fr-mt-2w"
  data-controller="controle-segmente"
/>

API publique

Composant	Rôle
dsfr:segmented	Composant principal de cette page.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
id	string	Selon composant	Identifiant HTML, normalisé et utilisé par aria-controls quand nécessaire.
legend	string	Requis	Légende du groupe.
name	string	Requis	Nom du groupe.
hint	string|null	null	Texte d’aide DSFR.
options	array|string	[]	Liste { value, label, ... }. Une chaîne JSON est acceptée.
sm	bool	false	Variante compacte.
legendInline	bool	false	Légende sur la même ligne.
noLegend	bool	false	Masque visuellement la légende.

Guide d'intégration

Question	Réponse
Famille DSFR	Formulaire
Quand l'utiliser	Quand l’interface collecte, valide ou soumet une donnée utilisateur.
Quand éviter	Pour afficher une information non modifiable : préférez un composant de contenu ou de feedback.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:segmented.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Contrôle segmenté : données typées via options

Variantes de contrôle segmenté

• contrôle segmenté avec attributs HTML pass-through pour id, class, data-* et aria-* quand le template le permet.

Points de contrôle propres à ce composant

• Réservez ce composant aux listes de choix courtes.
• Chaque option doit avoir une valeur stable.
• Vérifiez un cas vide, un cas avec plusieurs entrées et un cas avec données dynamiques pour options.

Accessibilité formulaire

• Chaque champ doit avoir un label, legend ou titre de groupe compréhensible.
• Les aides et erreurs doivent rester reliées au champ avec les identifiants générés.
• Utilisez required, disabled, error et valid pour refléter le vrai statut métier.

Intégration Symfony/Twig pour dsfr:segmented

• Passez options avec la syntaxe : pour conserver le type tableau : :options="options".
• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:segmented quand ils concernent son nœud racine.
• Gardez des id prévisibles pour dsfr:segmented, surtout dans les listes ou formulaires répétés.

Checklist de recette

• label visible ou accessible
• message erreur lu par technologie d’assistance
• valeurs conservées après erreur de validation
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les données options ne sont pas prises en compte	Ajoutez : devant la prop Twig : :options.
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.
Un panneau, menu ou état actif ne fonctionne pas	Vérifiez que le JavaScript DSFR est chargé et que les identifiants HTML sont uniques.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.