Select Input

Une composante d'entrée choisie. Peut être utilisé dans le cadre d'un tableau de bord ISLE ou de manière autonome. Dans ce dernier cas, vous souhaitez gérer les modifications via l'attribut "onChange" ou lier la valeur à une variable globale via l'attribut "bind".

Options

• bind | string: nom de la variable globale pour le numéro à attribuer. Default: ''.
• clearable | boolean: valeur booléenne indiquant si l'on peut effacer le ou les choix effectués. Default: none.
• defaultValue | (number|string|array|object): valeur par défaut de l'entrée au démarrage. Default: none.
• disabled | boolean: contrôle si l'entrée est active ou non. Default: false.
• inline | boolean: indique si l'entrée est affichée en ligne. Default: false.
• legend | (string|node): texte affiché à côté de l'entrée. Default: ''.
• menuPlacement | string: le placement du menu par rapport au contrôle (soit "automatique", "haut" ou "bas"). Default: 'auto'.
• multi | boolean: contrôle si l'on peut sélectionner plusieurs réponses. Default: false.
• onChange | function: fonction de rappel à invoquer lors d'un choix. Default: onChange() {}.
• options | array: tableau indiquant les choix disponibles à l'utilisateur. Default: [].
• placeholder | string: valeur à afficher avant de faire un premier choix. Default: none.
• tooltip | string: texte affiché lors du survol de la légende. Default: none.
• style | object: Styles CSS en ligne. Default: {}.

Exemples

Éditeur en direct

<SelectInput legend="Choose the test direction" defaultValue="two-sided" options={[ 'left-sided', 'right-sided', 'two-sided' ]} />

<SelectInput
    legend="Choose the test direction"
    defaultValue="two-sided"
    options={[
        'left-sided',
        'right-sided',
        'two-sided'
    ]}
/>

Résultat

ReferenceError: Provider is not defined