@mantine/core/lib/components/Autocomplete/Autocomplete.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
import { ComboboxGenericData, ComboboxGenericItem, ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames } from '../Combobox';
import { __BaseInputProps, __InputStylesNames, ClearSectionMode, InputClearButtonProps, InputVariant } from '../Input';
import { ScrollAreaProps } from '../ScrollArea';
export type RenderAutocompleteOption = (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;
export type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;
export interface AutocompleteProps extends BoxProps, Omit<__BaseInputProps, 'pointer'>, Omit<ComboboxLikeProps, 'data'>, StylesApiProps<AutocompleteFactory>, ElementProps<'input', 'onChange' | 'size'> {
    /** Data used to display options. Values must be unique. */
    data?: ComboboxGenericData;
    /** Controlled component value */
    value?: string;
    /** Default value for uncontrolled component */
    defaultValue?: string;
    /** Called when value changes */
    onChange?: (value: string) => void;
    /** Function to render custom option content */
    renderOption?: RenderAutocompleteOption;
    /** Props passed to the underlying `ScrollArea` component in the dropdown */
    scrollAreaProps?: ScrollAreaProps;
    /** Called when the clear button is clicked */
    onClear?: () => void;
    /** Props passed down to the clear button */
    clearButtonProps?: InputClearButtonProps;
    /** If set, the clear button is displayed when the component has a value @default false */
    clearable?: boolean;
    /** Determines how the clear button and rightSection are rendered @default 'both' */
    clearSectionMode?: ClearSectionMode;
    /** If set, the highlighted option is selected when the input loses focus @default false */
    autoSelectOnBlur?: boolean;
    /** If set, the dropdown opens when the input receives focus @default true */
    openOnFocus?: boolean;
}
export type AutocompleteFactory = Factory<{
    props: AutocompleteProps;
    ref: HTMLInputElement;
    stylesNames: AutocompleteStylesNames;
    variant: InputVariant;
}>;
export declare const Autocomplete: import("../..").MantineComponent<{
    props: AutocompleteProps;
    ref: HTMLInputElement;
    stylesNames: AutocompleteStylesNames;
    variant: InputVariant;
}>;