Interrupteur

• Voir la page de documentation du composant sur le Système de Design de l’État Ouvre une nouvelle fenêtre
• Voir la page d’exemple du Système de Design de l’État Ouvre une nouvelle fenêtre

Documentation du tag

Returns a toggle item. Takes a dict as parameter, with the following structure:

data_dict = {
    "label": "Label of the item",
    "help_text": "(Optional) string explaining the intended use of the item",
    "is_disabled": '''(Optional) boolean that indicate if the toggle is activated
    (default: False)''',
    "extra_classes": "(Optional) string with names of extra classes",
    "id": "(optional) Id of the item",
}

All of the keys of the dict can be passed directly as named parameters of the tag.

Relevant extra_classes:

• fr-toggle--label-left: sets the label on the left side
• fr-toggle--border-bottom: adds a border at the bottom

Tag name: dsfr_toggle

Usage: {% dsfr_toggle data_dict %}

Exemples

Données

{'label': 'Interrupteur basique'}

Résultat

Données

{'help_text': 'Vous ne pouvez pas utiliser cet interrupteur.',
 'is_disabled': True,
 'label': 'Interrupteur basique désactivé avec aide'}

Résultat

Données

{'extra_classes': 'fr-toggle--label-left fr-toggle--border-bottom',
 'help_text': 'Cet interrupteur présente toutes les options disponibles',
 'id': 'toggle-full',
 'is_disabled': False,
 'label': 'Interrupteur complet aligné à gauche'}

Résultat