Autocomplete

In Nyte

import { Autocomplete } from "@nyte-ai/ui/autocomplete";

@nyte-ai/ui/autocomplete re-exports the Base UI namespace unchanged. There is no Nyte styling on this subpath; the consumer owns every class, StyleX style, and layout decision. Base UI owns the interaction model, keyboard handling, focus management, and ARIA below.

Consumed by:

• desktop/src/renderer/src/chrome/font-family-select.tsx
• desktop/src/renderer/src/conversation/model-picker.tsx

The rest of this page is Base UI's documentation for @base-ui/react/autocomplete, reproduced verbatim under the MIT license, © Material-UI SAS. Component paths in examples refer to the Base UI package; in Nyte, import from the subpath above.

Usage guidelines

• Avoid when selection state is needed: Use Combobox instead of Autocomplete if the selection should be remembered and the input value cannot be custom. Unlike Combobox, Autocomplete's input can contain free-form text, as its suggestions only optionally autocomplete the text.
• Can be used for filterable command pickers: The input can be used as a filter for command items that perform an action when clicked when rendered inside the popup.
• Form controls must have an accessible name: It can be created using a <label> element or the Field component. See the forms guide.

Anatomy

Import the components and place them together:

import { Autocomplete } from '@base-ui/react/autocomplete';

<Autocomplete.Root>
  <Autocomplete.InputGroup>
    <Autocomplete.Input />
    <Autocomplete.Trigger />
    <Autocomplete.Icon />
    <Autocomplete.Clear />
    <Autocomplete.Value />
  </Autocomplete.InputGroup>

  <Autocomplete.Portal>
    <Autocomplete.Backdrop />
    <Autocomplete.Positioner>
      <Autocomplete.Popup>
        <Autocomplete.Arrow />

        <Autocomplete.Status />
        <Autocomplete.Empty />

        <Autocomplete.List>
          <Autocomplete.Row>
            <Autocomplete.Item />
          </Autocomplete.Row>

          <Autocomplete.Separator />

          <Autocomplete.Group>
            <Autocomplete.GroupLabel />
          </Autocomplete.Group>

          <Autocomplete.Collection />
        </Autocomplete.List>
      </Autocomplete.Popup>
    </Autocomplete.Positioner>
  </Autocomplete.Portal>
</Autocomplete.Root>;

Item values

Each <Autocomplete.Item> takes a value prop identifying it. Pass the item being rendered, so that props like itemToStringValue receive it.

Examples

Async search

Load items asynchronously while typing and render custom status content.

Inline autocomplete

Autofill the input with the highlighted item while navigating with arrow keys using the mode prop. Accepts aria-autocomplete values list, both, inline, or none.

Grouped

Organize related options with <Autocomplete.Group> and <Autocomplete.GroupLabel> to add section headings inside the popup.

Groups are represented by an array of objects with an items property, which itself is an array of individual items for each group. An extra property, such as value, can be provided for the heading text when rendering the group label.

interface ProduceGroupItem {
  value: string;
  // @highlight
  items: string[];
}

const groups: ProduceGroupItem[] = [
  {
    value: 'Fruits',
    // @highlight
    items: ['Apple', 'Banana', 'Orange'],
  },
  {
    value: 'Vegetables',
    // @highlight
    items: ['Carrot', 'Lettuce', 'Spinach'],
  },
];

Fuzzy matching

Use fuzzy matching to find relevant results even when the query doesn't exactly match the item text.

Limit results

Limit the number of visible items using the limit prop and guide users to refine their query using <Autocomplete.Status>.

Auto highlight

The first matching item can be automatically highlighted as the user types by specifying the autoHighlight prop on <Autocomplete.Root>. Set the prop's value to "always" if the highlight should always be present, such as when the list is rendered inline within a dialog.

The prop can be combined with the keepHighlight and highlightItemOnHover props to configure how the highlight behaves during mouse interactions.

Command palette

Use the autocomplete input to filter a list of command items that perform an action when clicked.

Grid layout

Display items in a grid layout, wrapping each row in <Autocomplete.Row> components.

Virtualized

Efficiently handle large datasets using a virtualization library like @tanstack/react-virtual.

Memoizing items

Memoizing each item is a simpler alternative to virtualization for datasets up to roughly 1,000 items. Wrap each item in React.memo and pass the item as a prop so unchanged items skip re-rendering. While memoization speeds up typing, it does not speed up opening; with a large enough number of items, the mount cost dominates, and virtualization becomes necessary to keep the open interaction fast on low-end devices.

interface Suggestion {
  id: string;
  label: string;
  description: string;
}

const SuggestionItem = React.memo(function SuggestionItem({ item }: { item: Suggestion }) {
  return (
    <Autocomplete.Item value={item}>
      <span>{item.label}</span>
      <span>{item.description}</span>
    </Autocomplete.Item>
  );
});

<Autocomplete.List>
  {(item: Suggestion) => <SuggestionItem key={item.id} item={item} />}
</Autocomplete.List>;

API reference

Root

Groups all parts of the autocomplete. Doesn't render its own HTML element.

Root Props:

Root.Props

Re-export of Root props.

Root.State

type AutocompleteRootState = {};

Root.Actions

type AutocompleteRootActions = { unmount: () => void };

Root.ChangeEventReason

type AutocompleteRootChangeEventReason =
  | 'trigger-press'
  | 'input-press'
  | 'outside-press'
  | 'item-press'
  | 'close-press'
  | 'escape-key'
  | 'list-navigation'
  | 'focus-out'
  | 'input-change'
  | 'input-clear'
  | 'clear-press'
  | 'chip-remove-press'
  | 'cancel-open'
  | 'none';

Root.ChangeEventDetails

type AutocompleteRootChangeEventDetails = (
  | { reason: 'trigger-press'; event: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent }
  | { reason: 'input-press'; event: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent }
  | { reason: 'outside-press'; event: MouseEvent | PointerEvent | TouchEvent }
  | { reason: 'item-press'; event: MouseEvent | PointerEvent | KeyboardEvent }
  | { reason: 'close-press'; event: MouseEvent | PointerEvent | KeyboardEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'list-navigation'; event: KeyboardEvent }
  | { reason: 'focus-out'; event: KeyboardEvent | FocusEvent }
  | { reason: 'input-change'; event: Event | InputEvent }
  | { reason: 'input-clear'; event: Event | FocusEvent | InputEvent }
  | { reason: 'clear-press'; event: MouseEvent | PointerEvent | KeyboardEvent }
  | { reason: 'chip-remove-press'; event: MouseEvent | PointerEvent | KeyboardEvent }
  | { reason: 'cancel-open'; event: MouseEvent }
  | { reason: 'none'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
};

Root.HighlightEventReason

type AutocompleteRootHighlightEventReason = 'keyboard' | 'pointer' | 'none';

Root.HighlightEventDetails

type AutocompleteRootHighlightEventDetails =
  | { reason: 'none'; event: Event; index: number }
  | { reason: 'keyboard'; event: KeyboardEvent; index: number }
  | { reason: 'pointer'; event: PointerEvent; index: number };

Trigger

A button that opens the popup. Renders a <button> element.

Trigger Props:

Trigger Data Attributes:

Trigger.Props

Re-export of Trigger props.

Trigger.State

type AutocompleteTriggerState = {
  /** Whether the popup is open. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Indicates which side the corresponding popup is positioned relative to its anchor. */
  popupSide: Side | null;
  /** Present when the corresponding items list is empty. */
  listEmpty: boolean;
  /** Whether the component should ignore user edits. */
  readOnly: boolean;
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
};

Value

The current value of the autocomplete. Doesn't render its own HTML element.

Value Props:

Value.Props

Re-export of Value props.

Value.State

type AutocompleteValueState = {};

Input

A text input to search for items in the list. Renders an <input> element.

Input Props:

Input Data Attributes:

Input.Props

Re-export of Input props.

Input.State

type AutocompleteInputState = {
  /** Whether the corresponding popup is open. */
  open: boolean;
  /** Indicates which side the corresponding popup is positioned relative to its anchor. */
  popupSide: Side | null;
  /** Present when the corresponding items list is empty. */
  listEmpty: boolean;
  /** Whether the component should ignore user edits. */
  readOnly: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
};

Icon

An icon that indicates that the trigger button opens the popup. Renders a <span> element.

Icon Props:

Icon.Props

Re-export of Icon props.

Icon.State

type AutocompleteIconState = {};

Clear

Clears the value when clicked. Renders a <button> element.

Clear Props:

Clear Data Attributes:

Clear.Props

Re-export of Clear props.

Clear.State

type AutocompleteClearState = {
  /** Whether the popup is open. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the clear button should be visible. */
  visible: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
};

List

A list container for the items. Renders a <div> element.

List Props:

List.Props

Re-export of List props.

List.State

type AutocompleteListState = {
  /** Whether the list is empty. */
  empty: boolean;
};

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

Portal Props:

Portal.Props

Re-export of Portal props.

Portal.State

type AutocompletePortalState = {};

Backdrop

An overlay displayed beneath the popup. Renders a <div> element.

Backdrop Props:

Backdrop Data Attributes:

Backdrop.Props

Re-export of Backdrop props.

Backdrop.State

type AutocompleteBackdropState = {
  /** Whether the popup is currently open. */
  open: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
};

Positioner

Positions the popup against the trigger. Renders a <div> element.

Positioner Props:

alignOffset Prop Example:

<Positioner
  alignOffset={({ side, align, anchor, positioner }) => {
    return side === 'top' || side === 'bottom' ? anchor.width : anchor.height;
  }}
/>

sideOffset Prop Example:

<Positioner
  sideOffset={({ side, align, anchor, positioner }) => {
    return side === 'top' || side === 'bottom' ? anchor.height : anchor.width;
  }}
/>

collisionAvoidance Prop Example:

<Positioner
  collisionAvoidance={{
    side: 'shift',
    align: 'shift',
    fallbackAxisSide: 'none',
  }}
/>

Positioner Data Attributes:

Positioner CSS Variables:

Positioner.Props

Re-export of Positioner props.

Positioner.State

type AutocompletePositionerState = {
  /** Whether the popup is currently open. */
  open: boolean;
  /** The side of the anchor the component is placed on. */
  side: Side;
  /** The alignment of the component relative to the anchor. */
  align: Align;
  /** Whether the anchor element is hidden. */
  anchorHidden: boolean;
  /** Whether there are no items to display. */
  empty: boolean;
};

Popup

A container for the list. Renders a <div> element.

Popup Props:

Popup Data Attributes:

Popup.Props

Re-export of Popup props.

Popup.State

type AutocompletePopupState = {
  /** Whether the component is open. */
  open: boolean;
  /** The side of the anchor the component is placed on. */
  side: Side;
  /** The alignment of the component relative to the anchor. */
  align: Align;
  /** Whether the anchor element is hidden. */
  anchorHidden: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** Whether there are no items to display. */
  empty: boolean;
};

Arrow

Displays an element positioned against the anchor. Renders a <div> element.

Arrow Props:

Arrow Data Attributes:

Arrow.Props

Re-export of Arrow props.

Arrow.State

type AutocompleteArrowState = {
  /** Whether the popup is currently open. */
  open: boolean;
  /** The side of the anchor the component is placed on. */
  side: Side;
  /** The alignment of the component relative to the anchor. */
  align: Align;
  /** Whether the arrow cannot be centered on the anchor. */
  uncentered: boolean;
};

Item

An individual item in the list. Renders a <div> element.

Item Props:

Item Data Attributes:

Item.Props

Re-export of Item props.

Item.State

type AutocompleteItemState = {
  /** Whether the item should ignore user interaction. */
  disabled: boolean;
  /** Whether the item is highlighted. */
  highlighted: boolean;
};

Group

Groups related items with the corresponding label. Renders a <div> element.

Group Props:

Group Data Attributes:

Group.Props

Re-export of Group props.

Group.State

type AutocompleteGroupState = {};

GroupLabel

An accessible label that is automatically associated with its parent group. Renders a <div> element.

GroupLabel Props:

GroupLabel.Props

Re-export of GroupLabel props.

GroupLabel.State

type AutocompleteGroupLabelState = {};

Separator

A visual separator between items or groups. Renders a <div> element.

Separator Props:

Separator.Props

Re-export of Separator props.

Separator.State

type AutocompleteSeparatorState = {
  /** The orientation of the separator. */
  orientation: Orientation;
};

Status

Displays a status message whose content changes are announced politely to screen readers. Useful for conveying the status of an asynchronously loaded list. This component's root element must remain mounted in the DOM to announce changes consistently across screen readers. Avoid hiding or removing the component itself with display: none, hidden, aria-hidden, or conditional rendering. Prefer updating or conditionally rendering its children instead. Renders a <div> element.

Status Props:

Status.Props

Re-export of Status props.

Status.State

type AutocompleteStatusState = {};

Empty

Renders its children only when the list is empty. Requires the items prop on the root component. Announces changes politely to screen readers. This component's root element must remain mounted in the DOM to announce changes consistently across screen readers. Avoid hiding or removing the component itself with display: none, hidden, aria-hidden, or conditional rendering. Prefer updating or conditionally rendering its children instead. Renders a <div> element.

Empty Props:

Empty.Props

Re-export of Empty props.

Empty.State

type AutocompleteEmptyState = {};

Collection

Renders filtered list items. Doesn't render its own HTML element.

If rendering a flat list, pass a function child to the List component instead, which implicitly wraps it.

Collection Props:

Collection.Props

Re-export of Collection props.

Collection.State

type AutocompleteCollectionState = {};

Row

Displays a single row of items in a grid list. Enable grid on the root component to turn the listbox into a grid. Renders a <div> element.

Row Props:

Row.Props

Re-export of Row props.

Row.State

type AutocompleteRowState = {};

InputGroup

A wrapper for the input and its associated controls. Renders a <div> element.

InputGroup Props:

InputGroup Data Attributes:

InputGroup.Props

Re-export of InputGroup props.

InputGroup.State

type AutocompleteInputGroupState = {
  /** Whether the corresponding popup is open. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the component should ignore user edits. */
  readOnly: boolean;
  /** Indicates which side the corresponding popup is positioned relative to its anchor. */
  popupSide: Side | null;
  /** Present when the corresponding items list is empty. */
  listEmpty: boolean;
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
};

useFilter

Matches items against a query using Intl.Collator for robust string matching.

Parameters:

Return Value:

type ReturnValue = AutocompleteFilter;

useFilteredItems

Returns the internally filtered items. Treat the result as read-only: it is internal state and may be a shared frozen array.

Return Value:

type ReturnValue = T[];

Additional Types

AutocompleteFilter

type AutocompleteFilter = {
  /** Returns whether the item matches the query anywhere. */
  contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
  /** Returns whether the item starts with the query. */
  startsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
  /** Returns whether the item ends with the query. */
  endsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
};

AutocompleteFilterOptions

type AutocompleteFilterOptions = {
  /**
   * The locale to use for string comparison.
   * Defaults to the user's runtime locale.
   */
  locale?: Intl.LocalesArgument;
};

External Types

Side

type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';

Align

type Align = 'start' | 'center' | 'end';

OffsetFunction

type OffsetFunction = (data: {
  side: 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
  align: 'start' | 'center' | 'end';
  anchor: { width: number; height: number };
  positioner: { width: number; height: number };
}) => number;

InteractionType

type InteractionType = 'mouse' | 'touch' | 'pen' | 'keyboard' | '';

Orientation

type Orientation = 'horizontal' | 'vertical';

Export Groups

• Autocomplete.Root: Autocomplete.Root, Autocomplete.Root.Props, Autocomplete.Root.State, Autocomplete.Root.Actions, Autocomplete.Root.ChangeEventReason, Autocomplete.Root.ChangeEventDetails, Autocomplete.Root.HighlightEventReason, Autocomplete.Root.HighlightEventDetails
• Autocomplete.Value: Autocomplete.Value, Autocomplete.Value.State, Autocomplete.Value.Props
• Autocomplete.Trigger: Autocomplete.Trigger, Autocomplete.Trigger.State, Autocomplete.Trigger.Props
• Autocomplete.Input: Autocomplete.Input, Autocomplete.Input.State, Autocomplete.Input.Props
• Autocomplete.InputGroup: Autocomplete.InputGroup, Autocomplete.InputGroup.State, Autocomplete.InputGroup.Props
• Autocomplete.Icon: Autocomplete.Icon, Autocomplete.Icon.State, Autocomplete.Icon.Props
• Autocomplete.Clear: Autocomplete.Clear, Autocomplete.Clear.State, Autocomplete.Clear.Props
• Autocomplete.List: Autocomplete.List, Autocomplete.List.State, Autocomplete.List.Props
• Autocomplete.Status: Autocomplete.Status, Autocomplete.Status.State, Autocomplete.Status.Props
• Autocomplete.Portal: Autocomplete.Portal, Autocomplete.Portal.State, Autocomplete.Portal.Props
• Autocomplete.Backdrop: Autocomplete.Backdrop, Autocomplete.Backdrop.Props, Autocomplete.Backdrop.State
• Autocomplete.Positioner: Autocomplete.Positioner, Autocomplete.Positioner.State, Autocomplete.Positioner.Props
• Autocomplete.Popup: Autocomplete.Popup, Autocomplete.Popup.State, Autocomplete.Popup.Props
• Autocomplete.Arrow: Autocomplete.Arrow, Autocomplete.Arrow.State, Autocomplete.Arrow.Props
• Autocomplete.Group: Autocomplete.Group, Autocomplete.Group.State, Autocomplete.Group.Props
• Autocomplete.GroupLabel: Autocomplete.GroupLabel, Autocomplete.GroupLabel.State, Autocomplete.GroupLabel.Props
• Autocomplete.Item: Autocomplete.Item, Autocomplete.Item.State, Autocomplete.Item.Props
• Autocomplete.Row: Autocomplete.Row, Autocomplete.Row.State, Autocomplete.Row.Props
• Autocomplete.Collection: Autocomplete.Collection, Autocomplete.Collection.State, Autocomplete.Collection.Props
• Autocomplete.Empty: Autocomplete.Empty, Autocomplete.Empty.State, Autocomplete.Empty.Props
• Autocomplete.Separator: Autocomplete.Separator, Autocomplete.Separator.Props, Autocomplete.Separator.State
• Autocomplete.useFilter
• Autocomplete.useFilteredItems
• Default: AutocompleteSeparatorProps, AutocompleteSeparatorState, AutocompleteInputProps, AutocompleteInputState, AutocompleteIconProps, AutocompleteIconState, AutocompleteClearProps, AutocompleteClearState, AutocompletePopupProps, AutocompletePopupState, AutocompletePositionerProps, AutocompletePositionerState, AutocompleteListProps, AutocompleteListState, AutocompleteRowProps, AutocompleteRowState, AutocompleteArrowProps, AutocompleteArrowState, AutocompleteBackdropProps, AutocompleteBackdropState, AutocompletePortalProps, AutocompletePortalState, AutocompleteGroupProps, AutocompleteGroupState, AutocompleteGroupLabelProps, AutocompleteGroupLabelState, AutocompleteEmptyProps, AutocompleteEmptyState, AutocompleteStatusProps, AutocompleteStatusState, AutocompleteCollectionState, AutocompleteCollectionProps, AutocompleteFilter, AutocompleteFilterOptions, AutocompleteRootState, AutocompleteRootActions, AutocompleteRootChangeEventReason, AutocompleteRootChangeEventDetails, AutocompleteRootHighlightEventReason, AutocompleteRootHighlightEventDetails, AutocompleteRootProps, AutocompleteTriggerState, AutocompleteTriggerProps, AutocompleteInputGroupState, AutocompleteInputGroupProps, AutocompleteItemState, AutocompleteItemProps, AutocompleteValueState, AutocompleteValueProps

Canonical Types

Maps Canonical: Alias — Use Canonical when its namespace is already imported; otherwise use Alias.

• Autocomplete.Root.Props: AutocompleteRootProps
• Autocomplete.Root.State: AutocompleteRootState
• Autocomplete.Root.Actions: AutocompleteRootActions
• Autocomplete.Root.ChangeEventReason: AutocompleteRootChangeEventReason
• Autocomplete.Root.ChangeEventDetails: AutocompleteRootChangeEventDetails
• Autocomplete.Root.HighlightEventReason: AutocompleteRootHighlightEventReason
• Autocomplete.Root.HighlightEventDetails: AutocompleteRootHighlightEventDetails
• Autocomplete.Value.State: AutocompleteValueState
• Autocomplete.Value.Props: AutocompleteValueProps
• Autocomplete.Trigger.State: AutocompleteTriggerState
• Autocomplete.Trigger.Props: AutocompleteTriggerProps
• Autocomplete.Input.State: AutocompleteInputState
• Autocomplete.Input.Props: AutocompleteInputProps
• Autocomplete.InputGroup.State: AutocompleteInputGroupState
• Autocomplete.InputGroup.Props: AutocompleteInputGroupProps
• Autocomplete.Icon.State: AutocompleteIconState
• Autocomplete.Icon.Props: AutocompleteIconProps
• Autocomplete.Clear.State: AutocompleteClearState
• Autocomplete.Clear.Props: AutocompleteClearProps
• Autocomplete.List.State: AutocompleteListState
• Autocomplete.List.Props: AutocompleteListProps
• Autocomplete.Status.State: AutocompleteStatusState
• Autocomplete.Status.Props: AutocompleteStatusProps
• Autocomplete.Portal.State: AutocompletePortalState
• Autocomplete.Portal.Props: AutocompletePortalProps
• Autocomplete.Backdrop.Props: AutocompleteBackdropProps
• Autocomplete.Backdrop.State: AutocompleteBackdropState
• Autocomplete.Positioner.State: AutocompletePositionerState
• Autocomplete.Positioner.Props: AutocompletePositionerProps
• Autocomplete.Popup.State: AutocompletePopupState
• Autocomplete.Popup.Props: AutocompletePopupProps
• Autocomplete.Arrow.State: AutocompleteArrowState
• Autocomplete.Arrow.Props: AutocompleteArrowProps
• Autocomplete.Group.State: AutocompleteGroupState
• Autocomplete.Group.Props: AutocompleteGroupProps
• Autocomplete.GroupLabel.State: AutocompleteGroupLabelState
• Autocomplete.GroupLabel.Props: AutocompleteGroupLabelProps
• Autocomplete.Item.State: AutocompleteItemState
• Autocomplete.Item.Props: AutocompleteItemProps
• Autocomplete.Row.State: AutocompleteRowState
• Autocomplete.Row.Props: AutocompleteRowProps
• Autocomplete.Collection.State: AutocompleteCollectionState
• Autocomplete.Collection.Props: AutocompleteCollectionProps
• Autocomplete.Empty.State: AutocompleteEmptyState
• Autocomplete.Empty.Props: AutocompleteEmptyProps
• Autocomplete.Separator.Props: AutocompleteSeparatorProps
• Autocomplete.Separator.State: AutocompleteSeparatorState