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 / InputGroupTextarea) 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

Slot	Default classes	Description
root	9 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 / InputGroupTextarea) 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.

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 / InputGroupTextarea) 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:

group/input-group dark:bg-input/30 hairline relative flex w-full items-center
rounded-vueda-field shadow-vueda-control 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][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