@antadesign/anta
    Preparing search index...

    Interface InputAutocompleteProps

    interface InputAutocompleteProps {
        suggestions: (string | SelectOption<string>)[];
        value?: string;
        defaultValue?: string;
        onValueChange?: (value: string) => void;
        onSelect?: (option: SelectOption) => void;
        filter?: boolean | ((option: SelectOption, query: string) => boolean);
        placeholder?: string;
        size?: "small" | "medium" | "large";
        status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
        statusIcon?: string & {} | false | (keyof IconShapes);
        tone?: string;
        clearable?: boolean;
        name?: string;
        disabled?: boolean;
        label?: ReactNode;
        hint?: ReactNode;
        leading?: ReactNode;
        trailing?: ReactNode;
        className?: string;
        style?: CSSProperties;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy

    • Omit<BaseProps, "children">
      • InputAutocompleteProps

    Indexable

    • [key: `data-${string}`]: unknown
    • [key: `aria-${string}`]: unknown
    Index
    suggestions value? defaultValue? onValueChange? onSelect? filter? placeholder? size? status? statusIcon? tone? clearable? name? disabled? label? hint? leading? trailing? className? style? id? title? slot? tabIndex? key?
    suggestions: (string | SelectOption<string>)[]

    The suggestions: bare strings or SelectOptions (value / label / hint / icon / tone / disabled). A flat list; picking one fills the field.

    value?: string

    Controlled value: the field's text, a free string not constrained to a suggestion. Leave undefined for uncontrolled.

    defaultValue?: string

    Initial value for uncontrolled use.

    onValueChange?: (value: string) => void

    Fires as the text changes (typing, picking a suggestion, or clearing) with the new field text.

    onSelect?: (option: SelectOption) => void

    Fires only when a suggestion is chosen, with that option.

    filter?: boolean | ((option: SelectOption, query: string) => boolean)

    How suggestions match the text. true uses the built-in case-insensitive substring match on value / label / hint; a function (option, query) => boolean uses a custom matcher; false shows suggestions unchanged for application-provided async or remote filtering.

    true
    placeholder?: string

    Placeholder text.

    size?: "small" | "medium" | "large"

    Field size.

    medium
    status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical"

    Validation status.

    statusIcon?: string & {} | false | (keyof IconShapes)

    Status icon override, or false to drop it.

    tone?: string

    Custom accent color — a named tone or any CSS color.

    clearable?: boolean

    Show a clear button while the field has text.

    name?: string

    Form field name.

    disabled?: boolean

    Disable the field.

    label?: ReactNode

    Field label.

    hint?: ReactNode

    Hint under the field.

    leading?: ReactNode

    Leading adornment inside the field.

    trailing?: ReactNode

    Trailing adornment inside the field.

    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    Settings
    Member Visibility

    On This Page
    Properties