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.
Utilisation
import { SearchBar } from "@monstera/ui"Champ vide
Le champ prend toute la largeur de son conteneur. Vide, il ne montre que la loupe et son placeholder : la croix d'effacement reste absente.
Effacement
La croix apparaît dès qu'il y a du texte, et remet la valeur à vide en passant par onValueChange : brancher onClear en plus ne sert qu'à réagir à l'effacement lui-même.
Tapez « ment » pour voir les suggestions.
Filtrage en direct
Le champ est contrôlé, chaque frappe remonte : le filtrage se fait dans l'écran, la barre ne connaît pas les résultats.
Accessibilité
Le champ est une zone de recherche nommée (aria-label), avec un bouton « Effacer la recherche » quand elle est remplie. Avec suggestions, il devient une combobox : la liste (listbox, nommée par suggestionsLabel) s'ouvre sous le champ à la saisie, les flèches haut et bas y circulent (aria-activedescendant), Entrée choisit, Échap referme, et un message de statut annonce « 3 suggestions » ou « Aucune suggestion ». Sans suggestions, rien de tout cela n'est rendu.
API
Prop
Type
RadioCard
Un choix exclusif présenté en cartes : toute la surface est cliquable, le bouton radio à droite n'est que le témoin de l'état.
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.