Select

Un choix parmi une liste.

Le champ n'est pas un <select> natif : celui-ci ne sait ni chercher, ni afficher une description sous chaque option, ni charger ses choix à la demande. Le comportement clavier du natif, lui, est reproduit — flèches, première lettre, échappement.

fetcher sert les listes qu'on ne peut pas descendre en entier : la requête part après la frappe et s'annule si l'on continue à taper.

Installation

sia-ui add select

Ou par le paquet, sans rien copier :

import { Select } from "@sia-ui/react-web";

Props

Prop	Type	Défaut	Description
aria-describedby	string	—
aria-invalid	boolean	—
aria-label	string	—
aria-labelledby	string	—
aria-required	boolean	—
children	ReactNode	—	Compatibility path. Prefer the options prop.
className	string	—
clearable	boolean	false
debounce	number	250
defaultValue	string	—
disabled	boolean	false
emptyText	ReactNode	—	Quand rien ne correspond. Par défaut, noResults de la locale.
errorText	ReactNode	—	Quand le chargement échoue. Par défaut, selectField.loadError de la locale.
fetcher	(query: string, signal?: AbortSignal) => Promise<SelectOption[]>	—
id	string	—
invalid	boolean	false
loadingText	ReactNode	—	Pendant le chargement distant. Par défaut, selectField.loadingOptions de la locale.
name	string	—
onValueChange	(value: string, option?: SelectOption) => void	—
options	SelectOption[]	—
overlayProps	Partial<Omit<OverlayProps, "children" | "open" | "onOpenChange" | "anchorRef">>	—	Réglages du panneau de la liste — décalage, marge au bord, classe. matchAnchorWidth: false le laisse prendre la largeur de ses options.
placeholder	string	—	Le texte du champ vide. Par défaut, select de la locale.
placement	OverlayPlacement	bottom-start
renderValue	(option: SelectOption) => ReactNode	—	Ce que montre le déclencheur. Par défaut, le libellé de l'option. La liste garde ses libellés complets — « 🇨🇲 Cameroun (+237) » — pendant que le champ fermé n'affiche que ce qui tient : « 🇨🇲 +237 ».
required	boolean	false
searchable	boolean	false
searchPlaceholder	string	—	Le texte indicatif de la recherche. Par défaut, searchPlaceholder de la locale.
spinnerProps	SpinnerProps	—	Réglages de l'indicateur de chargement des options distantes.
value	string	—
variant	"default" | "embedded"	default	embedded retire bordure, fond et largeur pleine du déclencheur : le Select se loge alors dans un autre contrôle — l'indicatif d'un PhoneInput, la taille de page d'une Pagination.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.