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
• Voir la page du composant sur Storybook 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

Exemple 1

{'label': 'Interrupteur basique'}

Exemple 2

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

Exemple 3

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