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

# InputGroup

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

> The shell that joins an input (or textarea) with one or more addons (icon, button, kbd, helper line) into a single bordered chip. The group, not its children, owns the hairline and focus ring: child controls strip their own chrome (see [InputGroupInput](/v3/reference/theming/keys/InputGroupInput.md) / [InputGroupTextarea](/v3/reference/theming/keys/InputGroupTextarea.md)) and the group reacts to `focus-visible` on any `[data-slot=input-group-control]` and to `aria-invalid` on any tagged child via `:has(...)` selectors. Inline addons (`align=inline-start` / `inline-end`) stay on a single row at `h-vueda-control`; block addons (`align=block-start` / `block-end`) stack and flip the row to `flex-col` with auto height, so the same shell supports left/right glyphs and top/bottom helper rows.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/InputGroup.md#theme-key-InputGroup-root) | 10 classes | The shell that joins an input (or textarea) with one or more addons (icon, button, kbd, helper line) into a single bordered chip. The group, not its children, owns the hairline and focus ring: child controls strip their own chrome (see [InputGroupInput](/v3/reference/theming/keys/InputGroupInput.md) / [InputGroupTextarea](/v3/reference/theming/keys/InputGroupTextarea.md)) and the group reacts to `focus-visible` on any `[data-slot=input-group-control]` and to `aria-invalid` on any tagged child via `:has(...)` selectors. Inline addons (`align=inline-start` / `inline-end`) stay on a single row at `h-vueda-control`; block addons (`align=block-start` / `block-end`) stack and flip the row to `flex-col` with auto height, so the same shell supports left/right glyphs and top/bottom helper rows. |

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

## root

> The shell that joins an input (or textarea) with one or more addons (icon, button, kbd, helper line) into a single bordered chip. The group, not its children, owns the hairline and focus ring: child controls strip their own chrome (see [InputGroupInput](/v3/reference/theming/keys/InputGroupInput.md) / [InputGroupTextarea](/v3/reference/theming/keys/InputGroupTextarea.md)) and the group reacts to `focus-visible` on any `[data-slot=input-group-control]` and to `aria-invalid` on any tagged child via `:has(...)` selectors. Inline addons (`align=inline-start` / `inline-end`) stay on a single row at `h-vueda-control`; block addons (`align=block-start` / `block-end`) stack and flip the row to `flex-col` with auto height, so the same shell supports left/right glyphs and top/bottom helper rows.

Default classes:

```text
group/input-group field-line bg-field hover:bg-field-hover relative flex w-full items-center
rounded-vueda-field transition-shadow
h-vueda-control min-w-0 has-[>textarea]:h-auto
has-[>[data-align=inline-start]]:[&>input]:pl-2
has-[>[data-align=inline-end]]:[&>input]:pr-2
has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3
has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3
has-[[data-slot=input-group-control]:focus-visible]:hairline-ring has-[[data-slot=input-group-control]:focus-visible]:focus-ring-shadow
has-[[data-slot][data-warning=true]]:not-has-[[data-slot][aria-invalid=true]]:hairline-warning
has-[[data-slot][aria-invalid=true]]:hairline-destructive has-[[data-slot][aria-invalid=true]:focus-visible]:focus-ring-shadow-destructive
```

Source: `client/lib/theme/vueda-tailwind/controls/InputGroup.theme.js:19`