Select
Le choix dans une liste fermée, à l'intérieur d'un formulaire. Le kit habille un select natif au lieu de redessiner une liste : celle qui s'ouvre est donc celle du système, avec sa navigation clavier, sa recherche à la frappe et sa roue plein écran sur téléphone.
Utilisation
import { Select } from "@monstera/ui"Il détermine les pièces à fournir.
Par défaut
Les options se passent en tableau à la prop options. L'option qui porte le placeholder est masquée dans la liste : on ne peut pas revenir à « rien choisi » une fois un motif pris. Une option peut être présente sans être choisissable (disabled).
Options en enfants
Les options peuvent aussi s'écrire en enfants. C'est la seule façon d'obtenir des groupes (optgroup), que la prop options ne sait pas exprimer.
Choisissez un motif pour continuer.
Erreur
En erreur, le chevron cède la place à une icône d'alerte : l'état ne repose pas que sur la couleur. Choisir une option lève l'erreur.
Repris de votre demande en cours.
Désactivé
Désactivé, le champ se grise et son chevron cesse de se retourner. Sur grand écran, c'est une info-bulle au survol qui dit pourquoi la liste est fermée.
Select ou DropdownMenu
Les deux ouvrent une liste, mais ils ne font pas le même travail.
Select est un champ de formulaire : il porte une valeur, il se soumet, il s'assemble avec Field pour recevoir un libellé, une aide et une erreur. La liste qu'il ouvre appartient au système, ce qui lui donne gratuitement la navigation clavier, la recherche à la frappe et la roue plein écran sur téléphone. C'est ce qu'on veut pour « quel est le motif de votre projet ».
DropdownMenu est un menu d'actions : ses entrées déclenchent quelque chose, elles ne représentent pas une valeur. Il est dessiné par le kit, donc il accepte des icônes, un texte secondaire et un ton danger, ce qu'un <option> natif ne sait pas rendre. C'est ce qu'on veut pour « modifier, partager, supprimer ».
Le réflexe : si la réponse part avec le formulaire, c'est un Select.
DropdownMenu
Le menu d'actions du kit, dessiné et non natif.
API
Prop
Type
SegmentedButton
Le champ de formulaire qui pose un choix unique entre 2 et 5 options, toutes visibles d'un coup d'œil. Le composant est contrôlé : il affiche value et remonte le choix par onChange, sans rien mémoriser lui-même.
Slider
Le curseur de plage, bâti sur un input range natif : il se pilote aussi bien au doigt qu'aux flèches du clavier.