Listes déroulantes

• 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 select item. Prefer the use of an actual form (see documentation)

Takes a dict as parameter, with the following structure:

data_dict = {
    "id": "The html id of the select item",
    "label": "Label of the select item",
    "onchange": "(Optional) Action that happens when the select is changed",
    "selected": "(Optional) If the item is selected",
    "default": { # Optional
        "disabled": "If the item is disabled",
        "hidden": "If the item is hidden",
    },
    "options": [
        {"text": "Option 1", "value": 1 },
        {"text": "Option 2", "value": 2 }
    ],
    "extra_classes": "(Optional) string with names of extra classes"
}

Relevant extra_classes:

• fr-sidemenu--sticky: Makes the menu sticky
• fr-sidemenu--sticky-full-height: Makes the menu take the full height of the screen
• fr-sidemenu--right: Moves the menu to the right side of the screen

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

Tag name: dsfr_select

Usage: {% dsfr_select data_dict %}

Exemples

Données

{'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'},
 'id': 'select-example-id',
 'label': 'Label de l’élément select',
 'onchange': 'console.log(value)',
 'options': [{'text': 'Option 1', 'value': 1},
             {'text': 'Option 2', 'value': 2}]}

Résultat