A
Accueil > Components > AutocompleteAddress

AutocompleteAddress

Champ adresse basé sur Autocomplete. Le consommateur fournit les suggestions via onSearchChange/suggestions.TagsuiInformationsExperimentalExemples1StylesDisponibles
Default
Adresse
ex : 3 rue Robespierre
export const Default = () => {
const [value, setValue] = useState<AutocompleteOption[]>([]);
const [suggestions, setSuggestions] = useState<AutocompleteOption[]>([]);
const onSearchChange: AutocompleteAddressProps['onSearchChange'] = query => {
setSuggestions(query && query.length >= 3 ? MOCK_SUGGESTIONS : []);
};
return (
<Box minH={300}>
<AutocompleteAddress
label="Adresse"
value={value}
suggestions={suggestions}
onSearchChange={onSearchChange}
onPlaceSelected={(placeId: string) => {
const found = MOCK_SUGGESTIONS.find(s => s.value === placeId);
if (found) setValue([found]);
}}
onClear={() => setValue([])}
/>
</Box>
);
};
Alveole UI Kit — v1.8.4