---
url: "https://vueda.dev/v3/reference/theming/keys/WidgetGenericAutoComplete.md"
title: "WidgetGenericAutoComplete"
---

# WidgetGenericAutoComplete

Source: `client/lib/theme/vueda-tailwind/widgets/index.js`

> The root remains unstyled so the widget can sit inside any form shell.

Vue component: [WidgetGenericAutoComplete](/v3/reference/api/vue/WidgetGenericAutoComplete.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/WidgetGenericAutoComplete.md#theme-key-WidgetGenericAutoComplete-root) |  | The root remains unstyled so the widget can sit inside any form shell. |
| [inner](/v3/reference/theming/keys/WidgetGenericAutoComplete.md#theme-key-WidgetGenericAutoComplete-inner) | `flex flex-row gap-2 flex-wrap` | The inner row wraps the dropdown and text lookup controls together. |
| [dropdownOuter](/v3/reference/theming/keys/WidgetGenericAutoComplete.md#theme-key-WidgetGenericAutoComplete-dropdownOuter) | `flex flex-col flex-shrink` | The dropdown column keeps only the width its trigger needs. |
| [autoCompleteOuter](/v3/reference/theming/keys/WidgetGenericAutoComplete.md#theme-key-WidgetGenericAutoComplete-autoCompleteOuter) | `flex flex-col flex-grow` | The autocomplete column grows to absorb remaining row width. |

<a id="theme-key-WidgetGenericAutoComplete-root"></a>

## root

> The root remains unstyled so the widget can sit inside any form shell.

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetGenericAutoComplete.theme.js:18`

<a id="theme-key-WidgetGenericAutoComplete-inner"></a>

## inner

> The inner row wraps the dropdown and text lookup controls together.

Default classes:

`flex flex-row gap-2 flex-wrap`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetGenericAutoComplete.theme.js:22`

<a id="theme-key-WidgetGenericAutoComplete-dropdownOuter"></a>

## dropdownOuter

> The dropdown column keeps only the width its trigger needs.

Default classes:

`flex flex-col flex-shrink`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetGenericAutoComplete.theme.js:26`

<a id="theme-key-WidgetGenericAutoComplete-autoCompleteOuter"></a>

## autoCompleteOuter

> The autocomplete column grows to absorb remaining row width.

Default classes:

`flex flex-col flex-grow`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetGenericAutoComplete.theme.js:30`