Easy Solutions - Composants / Select

Base

Usage minimal : une liste d'options avec un placeholder optionnel et une valeur présélectionnée.

<twig:Select placeholder="Choisir un produit…" :options="[…]" /> <twig:Select value="easymonitor" :options="[…]" />

Tailles

La prop size accepte trois valeurs : sm, default, lg.

<twig:Select size="sm" placeholder="Small" :options="[…]" /> <twig:Select size="default" placeholder="Default" :options="[…]" /> <twig:Select size="lg" placeholder="Large" :options="[…]" />

Options désactivées

Ajouter disabled: true sur une option pour la rendre non sélectionnable.

<twig:Select placeholder="Choisir un rôle…" :options="[ {value: 'admin', label: 'Administrateur'}, {value: 'editor', label: 'Éditeur'}, {value: 'readonly', label: 'Lecture seule', disabled: true}, ]" />

Groupes d'options

Ajouter la clé group sur les options pour les regrouper en <optgroup>. Les options consécutives avec le même group sont automatiquement regroupées.

<twig:Select placeholder="Choisir un produit…" :options="[ {group: 'Monitoring', value: 'easycheck', label: 'EasyCheck'}, {group: 'Monitoring', value: 'easymonitor', label: 'EasyMonithor'}, {group: 'Exploitation', value: 'easyaccess', label: 'EasyAccess'}, {group: 'Exploitation', value: 'easyexploit', label: 'EasyExploit'}, ]" />

Sélection multiple

La prop multiple active la sélection de plusieurs valeurs. Maintenir Ctrl (ou Cmd sur Mac) pour multi-sélectionner.

<twig:Select multiple="{{ true }}" :options="[…]" />

État d'erreur

Envelopper le <twig:Select> dans <twig:Field> pour afficher un label, un message d'erreur et l'état aria-invalid.

<twig:Field> <twig:Field:Label for="product_err" required>Produit</twig:Field:Label> <twig:Select id="product_err" aria-invalid placeholder="Choisir…" :options="[…]"/> <twig:Field:Error>Veuillez sélectionner un produit.</twig:Field:Error> </twig:Field>

API du composant

Prop	Type	Défaut	Description
`size`	'default'\|'sm'\|'lg'	`'default'`	Taille du select.
`placeholder`	string	`null`	Option désactivée affichée en premier. Ex : "Choisir…"
`options`	array	`[]`	Tableau `[{value, label}]`. Ajouter `group` pour les optgroups, `disabled` pour désactiver une option.
`value`	mixed	`null`	Valeur présélectionnée.
`multiple`	bool	`false`	Active la sélection multiple. Supprime la chevron et retire le padding droit.

Do & Don't

Utiliser un placeholder explicite : "Choisir un produit…" plutôt que "Sélectionner"
Grouper les options liées avec group quand il y a plus de 6 options
Préférer le Select au groupe Radio à partir de 5 options
Utiliser value pour présélectionner la valeur la plus probable

Ne jamais utiliser un select pour 2 - 3 options, utiliser Radio
Ne pas utiliser un <select> HTML natif hors composant DS
Ne pas dépasser 15 options sans grouper, liste illisible

Règles

Règle

2 - 4 options → Radio. 5+ options → Select. C'est la règle de décision principale entre les deux composants.

Règle

Jamais de <select> natif dans les templates, toujours <twig:Select> pour garantir les tokens et l'accessibilité.

Règle

Pour le label, l'aide et les messages d'erreur, envelopper le composant dans <twig:Field> le Select seul ne gère pas ces états.