import { Meta, Canvas, Controls, Source } from '@storybook/blocks'; import { linkTo } from '@storybook/addon-links'; import '../../../stories/styles/shared.css';

Select - Vue d'ensemble

Les composants de sélection facilitent le choix d'une ou plusieurs options parmi une liste prédéfinie. Cette page détaille chaque variante disponible et vous guide pour choisir celle qui correspond le mieux à votre cas d'usage.

## Variantes disponibles Notre système propose cinq modes de sélection, chacun adapté à des besoins spécifiques :
linkTo('Composants/Formulaires/Selects/SySelect')()} > SySelect

SySelect

Composant de sélection complet et flexible, supportant la sélection simple ou multiple.
Idéal pour :
  • Sélection d'une ou plusieurs options
  • Affichage sous forme de puces (chips)
  • Interfaces utilisateur standard
  • Support de la validation
  • Support de la recherche par caractères imprimables (Navigation vers l'option commençant par le caractère saisi)
linkTo('Composants/Formulaires/Selects/SySelect')()}> Voir la documentation →
linkTo('Composants/Formulaires/Selects/SyAutocomplete')()} > SyAutocomplete

SyAutocomplete

Champ de saisie avec suggestions filtrées, compatible simple ou multiple, avec gestion des états et des puces.
Idéal pour :
  • Rechercher dans des listes longues
  • Filtrer côté client en temps réel
  • Afficher des chips pour les sélections multiples
  • Gérer les erreurs, avertissements et succès
linkTo('Composants/Formulaires/Selects/SyAutocomplete')()}> Voir la documentation →
SySelect

SyBtnSelect

Un composant de sélection sous forme de bouton, idéal pour les menus utilisateur ou les sélecteurs compacts.
Idéal pour :
  • Menus utilisateur
  • Interfaces compactes
  • Affichage d'informations principales et secondaires
linkTo('Composants/Formulaires/Selects/SyBtnSelect')()}> Voir la documentation →
SySelect

SelectBtnField

Un composant de sélection sous forme de boutons toggle, idéal pour les choix visuels et les options mutuellement exclusives.
Idéal pour :
  • Choix visuels et explicites
  • Options mutuellement exclusives ou multiples
  • Interfaces modernes avec mise en évidence visuelle
linkTo('Composants/Formulaires/Selects/SelectBtnField')()}> Voir la documentation →
SySelect

SyInputSelect

Ce composant est déprécié, et n'est conservé que pour des raisons de rétrocompatibilité.
L'utilisation du composant SySelect est recommandé à la place.
linkTo('Composants/Formulaires/Selects/SyInputSelect')()}> Voir la documentation →
## Tableau comparatif des fonctionnalités
Fonctionnalité SyAutocomplete SySelect SelectBtnField
Sélection multiple ✅ ✅ ✅
Affichage de puces (chips) ✅ ✅ ❌
Validation intégrée ✅ ✅ ❌ ✅
Apparence de bouton ❌ ❌ ✅ ✅
Mode icône uniquement ❌ ❌ ✅ ❌
Effaçable (clearable) ✅ ✅ ✅
Densité personnalisable ✅ ✅ ❌
Retourne l'objet complet ✅ ✅ ❌
Disposition en ligne/colonne ❌ ❌ ❌ ✅
Options uniques ❌ ❌ ❌ ✅
## Comment choisir la bonne variante ? ### Utilisez SySelect quand : - Vous avez besoin d'une sélection simple ou multiple - Vous souhaitez afficher les sélections multiples sous forme de puces (chips) - Vous avez besoin de personnaliser la densité d'affichage ### Utilisez SyAutocomplete quand : - Vous voulez filtrer la liste au fil de la saisie - Vous manipulez des listes longues nécessitant une recherche côté client - Vous avez besoin d'un champ unique ou multiple avec puces et gestion des états (erreur / avertissement / succès) ### Utilisez SyBtnSelect quand : - Vous créez un menu utilisateur ou un sélecteur compact - Vous souhaitez afficher des informations principales et secondaires - Vous avez besoin d'un mode icône uniquement pour les interfaces très compactes ### Utilisez SelectBtnField quand : - Vous avez besoin d'options visuellement distinctes sous forme de boutons - Vous souhaitez permettre la sélection multiple ou unique d'options - Vous avez besoin d'une disposition en ligne ou en colonne des options ## Exemple d'implémentation // SyAutocomplete - Recherche avec suggestions // SySelect - Sélection multiple avec puces // SelectBtnField - Sélection simple // SelectBtnField - Sélection multiple `} /> ## Bonnes pratiques - Toujours spécifier un label clair pour indiquer ce que l'utilisateur doit sélectionner - Utiliser la propriété `required` lorsqu'une sélection est obligatoire - Pour SySelect et SyInputSelect, ajouter `clearable` pour permettre à l'utilisateur d'effacer sa sélection - Pour les sélections multiples, préférer l'affichage en puces (chips) pour une meilleure lisibilité - Adapter le type de sélecteur au contexte d'utilisation (formulaire standard, menu utilisateur, etc.) - Pour SelectBtnField, utiliser la propriété `inline` pour une disposition horizontale des options - Pour SelectBtnField, utiliser la propriété `unique` sur certaines options pour qu'elles désélectionnent automatiquement les autres options lorsqu'elles sont sélectionnées Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.