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.
Utilisation
import { SegmentedButton } from "@monstera/ui"Sélection
L'option retenue passe sur fond primaire, précédée d'une coche. Le groupe est annoncé comme un radiogroup, chaque option comme un bouton radio.
Version discrète
variant à subtle donne une piste plus basse et une option retenue sur aplat clair, sans coche. Elle accompagne une lecture au lieu de la commander.
Sans coche
showCheck à false retire la coche d'une piste pleine : seul le fond coloré distingue l'option retenue. C'est un ajout du kit, la version pleine garde toujours la coche dans la maquette.
Pleine largeur
Par défaut la piste se dimensionne sur ses libellés. fullWidth l'étire dans son conteneur et donne à chaque option la même part, sans jamais descendre sous la largeur de son libellé.
Débordement
Quand les libellés ne tiennent plus dans la largeur disponible, la piste défile à l'horizontale. Aucun libellé n'est tronqué, et le débordement reste dans la piste au lieu de partir dans la page.
Quand l'employer
Le SegmentedButton est un champ de formulaire, au même titre que le Select : il porte une valeur, il se soumet, il s'assemble avec Field. On le prend quand les options sont assez peu nombreuses pour tenir à l'écran, 2 à 5 au maximum, soit le nombre d'options que la maquette expose. Au-delà, la piste devient illisible et c'est le Select qu'il faut.
Laquelle des deux versions
La version pleine est la réponse par défaut : l'option retenue s'affiche sur aplat navy, avec sa coche. Elle se lit de loin, et c'est ce qu'on veut d'un champ qu'on remplit.
La version discrète (variant="subtle") sert les bascules qui commandent ce qu'on est en train de lire. Sur une offre de crédit, « Avec / Sans assurance » recalcule la mensualité, le coût et le total dû juste en dessous : l'aplat navy y prend le pas sur les chiffres qu'il fait changer. L'option retenue passe donc sur le gris clair, en texte navy, et la piste descend de 48 à 32 de haut.
La règle tient en une phrase : pleine quand la piste EST la réponse, discrète quand la réponse est ailleurs sur l'écran.
Ce n'est pas un sélecteur de vues ni un groupe de filtres. Basculer entre deux affichages d'une même page, c'est Tabs ; cumuler des critères, c'est Chip. Le SegmentedButton répond à une question, il ne réorganise pas l'écran.
Select
Le même choix unique, mais dans une liste fermée qui s'ouvre.
API
Prop
Type
SearchBar
Le champ de recherche en pilule : une loupe à gauche, la saisie au milieu, et une croix d'effacement qui n'apparaît qu'une fois le champ rempli.
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.