Aller au contenu
Design system

Composants · forms

Sélection

Choisir parmi des options connues : liste courte (SelectField, RadioGroup), longue avec recherche (Combobox), multiple (MultiSelect, CheckboxGroup), binaire (Checkbox, Switch).

  • SelectField
  • Combobox
  • MultiSelect
  • Checkbox
  • CheckboxGroup
  • RadioGroup
  • Switch

Listes déroulantes

Les exemples utilisent 12 tiers fictifs (clients des commandes de démonstration et fournisseurs).

SelectField

Quand l’utiliser : Liste courte et fermée (moins d’une quinzaine d’options) : site, conditions de paiement, unité. Au-delà, ou s’il faut chercher, utiliser Combobox.

Choisissez des conditions de paiement pour pouvoir confirmer la commande.

Devise de la société.

Clavier : Espace/Entrée ouvre, flèches pour naviguer, saisie des premières lettres pour sauter. clearable ajoute un bouton pour vider.
Afficher le code
<SelectField label="Site de livraison" options={sites} value={site} onValueChange={setSite} required />
<SelectField label="Conditions de paiement" options={terms} value={null} onValueChange={…} clearable placeholder="Choisir…" />

Combobox avec recherche de tiers

Quand l’utiliser : Choisir un tiers, un article ou un compte dans une longue liste : recherche par nom, code ou ville (texte secondaire). onSearch pour une recherche côté serveur ; onCreate pour proposer la création quand rien ne correspond.

Résultats après 500 ms (latence simulée).

Sélectionnez le fournisseur : il détermine le prix d’achat du paddy.

Tapez « kossodo », « bobo » ou « FRS ». La recherche ignore accents et majuscules. Option désactivée : Transports Démo Kadiogo (fournisseur bloqué).
Afficher le code
<Combobox
  label="Client" required options={customers} value={customer}
  onValueChange={(value, option) => setCustomer(value)}
  placeholder="Nom, code ou ville…"
/>

// Recherche serveur (temporisée) : le parent met à jour options et loading
<Combobox label="Tiers (recherche serveur)" options={results} loading={loading}
  onSearch={(q) => api.searchParties(q).then(setResults)} selectedOption={selected}
  onCreate={(q) => openCreateParty(q)} createLabel={(q) => `Créer le tiers « ${q} »`} />

MultiSelect

Quand l’utiliser : Choisir plusieurs valeurs dans une liste moyenne à longue, typiquement dans un panneau de filtres. Les choix s’affichent en puces retirables, « +n » au-delà de maxVisibleChips.

À validerConfirmé+1

Vide = tous les sites.

Afficher le code
<MultiSelect label="Statuts" options={statusOptions} value={statuses} onValueChange={setStatuses} maxVisibleChips={2} />

Cases, boutons radio, interrupteurs

Checkbox et CheckboxGroup

Quand l’utiliser : Checkbox pour une option indépendante (accepter, inclure) ; état indéterminé pour un « tout sélectionner » partiel. CheckboxGroup pour plusieurs options liées sous une même légende.

À compta@grossiste-demo.bf

Livraison express (non souscrite)

Cochez la case pour valider une pesée hors tolérance.

Documents à imprimer

Pour le magasinier

Lot non libéré

Jours de livraison (obligatoire)

Choisissez au moins un jour de livraison.

Variante touch : case de 24 px et ligne cliquable ≥ 44 px pour les écrans terrain.
Afficher le code
<Checkbox label="Tout livrer" checked={all} onCheckedChange={…} />   // all : true | false | 'indeterminate'
<Checkbox label="J’ai contrôlé l’humidité" description="Mesure saisie à la réception" size="touch" />
<CheckboxGroup label="Documents à imprimer" options={docs} value={value} onValueChange={setValue} orientation="horizontal" />

RadioGroup

Quand l’utiliser : Choix unique parmi 2 à 6 options visibles d’un coup d’œil. Variante card pour un choix structurant (mode de paiement, type de document) avec description.

Priorité de préparation
Mode de règlement

Encaissement en caisse avec reçu.

Orange Money, Moov Money : référence de transaction requise.

Rapproché avec le relevé bancaire.

Remise en banque sous 48 h.

Afficher le code
<RadioGroup label="Priorité" options={…} value={priority} onValueChange={setPriority} orientation="horizontal" />
<RadioGroup label="Mode de règlement" variant="card" options={…} value={mode} onValueChange={setMode} />

Switch

Quand l’utiliser : Activer ou désactiver un réglage qui prend effet immédiatement (paramètres, préférences). Pour une valeur de formulaire validée à l’enregistrement, préférer Checkbox.

Une facture est émise dès la validation du BL.

Réglage verrouillé par l’administrateur.

Afficher le code
<Switch label="Facturer automatiquement à la livraison" checked={on} onCheckedChange={setOn} />
<Switch label="Mode hors ligne" labelPosition="start" size="touch" />