diff --git a/.specs/field-input-group.md b/.specs/field-input-group.md
new file mode 100644
index 000000000..401442d5c
--- /dev/null
+++ b/.specs/field-input-group.md
@@ -0,0 +1,146 @@
+---
+name: field-input-group
+category: inputs
+structure: monolithic
+status: implemented
+spec_version: 1
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=3714-10802
+  node_id: 3714:10802
+checksum: 6e03ff3fb8fdf3f005031bc583ef44c78b670d4f95304248730cae0846a69c76
+created: 2026-07-01
+last_updated: 2026-07-01
+---
+
+# FieldInputGroup — Component Spec
+
+## Purpose
+
+Form field wrapper around `InputGroup` that composes `Label`, `InputGroup` (with its own middle `<input>` rendered internally), and `HelperText` into a single vertical stack with consistent spacing. Mirrors `FieldText`'s API and template shape verbatim, except the underlying primitive is `InputGroup` (fixed height, no `size` prop, side slots for icons/text) instead of `InputText`. Use it whenever a text input surrounded by prefix/suffix content needs a visible label or helper/error message.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import FieldInputGroup from '@aziontech/webkit/field-input-group'
+
+const domain = ref('')
+</script>
+
+<template>
+  <FieldInputGroup
+    v-model="domain"
+    label="Website"
+    placeholder="mysite"
+    helper-text="Enter the domain without the scheme."
+    required
+  >
+    <template #left>https://</template>
+    <template #right>.com</template>
+  </FieldInputGroup>
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `modelValue` | `string` | `''` | no | Two-way bound value of the internal `<input>`. |
+| `label` | `string` | `''` | no | Text rendered inside the `Label`. When empty, the label row is omitted. |
+| `placeholder` | `string` | `''` | no | Placeholder forwarded to the internal `<input>`. |
+| `helperText` | `string` | `''` | no | Auxiliary text rendered inside `HelperText`. When empty, the helper row is omitted **except** when `disabled` is true — in that case the component falls back to a default disabled message so the lock icon always has matching copy. |
+| `disabled` | `boolean` | `false` | no | Disables the input and the `InputGroup` chrome, and switches the helper to `kind="disabled"` (lock icon). |
+| `readonly` | `boolean` | `false` | no | Marks the internal input read-only; value is visible but not editable. Native pass-through. |
+| `required` | `boolean` | `false` | no | Adds the Required tag to the `Label`, sets `required` on `InputGroup`, and sets native `required` + `aria-required` on the internal `<input>`. |
+| `invalid` | `boolean` | `false` | no | Sets `invalid` on `InputGroup` (danger border) and switches the helper to `kind="invalid"`. Also sets `aria-invalid` on the internal `<input>`. |
+| `inputId` | `string` | `''` | no | `id` for the internal `<input>`; consumed by `Label` via `for` and by `aria-describedby` wiring. Auto-generated via Vue's `useId()` when empty. |
+| `name` | `string` | `''` | no | HTML `name` for the internal `<input>` (form + vee-validate integration). |
+
+## Events
+
+| Event | Payload | Notes |
+|---|---|---|
+| `update:modelValue` | `[value: string]` | Re-emitted from the internal `<input>` on native `input` event. Enables `v-model`. |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `left` | — | Forwarded verbatim to `InputGroup`'s `#left`. Optional prefix content (icon, static text, or a small control). |
+| `right` | — | Forwarded verbatim to `InputGroup`'s `#right`. Optional suffix content. |
+
+## States
+
+- Visual states delegated to `InputGroup`: `default`, `hover`, `focus-within`, `invalid`, `required`, `disabled`.
+- On the field wrapper root: `data-disabled`, `data-invalid`, `data-required` mirror the props (for test/query targeting).
+- `HelperText.kind` computed by precedence: `disabled > invalid > required > 'helper'`.
+- When `disabled` is set and `helperText` is empty, the helper defaults to `'This field is locked.'` (parity with `FieldText`).
+
+## Motion & Animations
+
+_none_
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| stack gap (vertical) | `var(--spacing-xs)` |
+| internal input surface | `var(--bg-surface)` |
+| internal input text | `var(--text-default)` |
+| internal input placeholder | `var(--text-muted)` |
+| internal input padding.x | `var(--spacing-md)` |
+| internal input typography | `.text-label-sm` |
+
+Border / focus / hover / invalid / required / disabled tokens are owned by the nested `InputGroup`.
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | — | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: delegated to `InputGroup` (focus-within ring on the group root). The internal `<input>` renders `focus:ring-0 outline-none` so only the group ring shows.
+- Keyboard map: `Tab` moves through any interactive side-slot content and then the internal `<input>`, in DOM order.
+- ARIA: internal `<input>` receives `aria-invalid`, `aria-required`, and `aria-describedby` pointing at the `HelperText` id when helper text is present or `disabled` forces the fallback. `Label` is linked via `for=<inputId>`.
+- Contrast ≥4.5:1 for label / input text / helper text against their surfaces.
+- Motion: state color transitions come from `InputGroup` (`duration-150 ease-out`, `motion-reduce:transition-none`).
+- Touch target ≥32×32 px (matches the fixed `h-8` `InputGroup` root).
+
+## Stories (Storybook)
+
+- Default — value + label + placeholder + helperText, no side slots filled.
+- WithSlots — `#left` (`https://`) and `#right` (`.com`) filled.
+- Required — `required=true`, reactive validation flow (label shows Required tag, invalid switches on empty submission).
+- Invalid — `invalid=true` with a message in `helperText`.
+- Disabled — `disabled=true`, helper falls back to the disabled copy.
+- Icons — PrimeIcons in both side slots (`pi pi-globe` left, `pi pi-times` right).
+
+Justification for six stories (deviates from Default+Types+Sizes+state pattern): the component has no `kind` and no `size`, so `Types` and `Sizes` do not apply. `Default`, `WithSlots`, and `Icons` document the composition API (label + helper + side slots). `Required`, `Invalid`, `Disabled` exercise the three state signals the wrapper propagates.
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export points at `index.ts`, and a standalone `./<name>-root` export points at the root `.vue` (tree-shaking). Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/.specs/input-group.md b/.specs/input-group.md
new file mode 100644
index 000000000..50215ef96
--- /dev/null
+++ b/.specs/input-group.md
@@ -0,0 +1,156 @@
+---
+name: input-group
+category: inputs
+structure: monolithic
+status: implemented
+spec_version: 3
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=3714-10802
+  node_id: 3714:10802
+checksum: 0ede3c42dbd778be429c8e91192d35cbc9b09f42154ae6a9ae6f064a2b6a74d7
+created: 2026-07-01
+last_updated: 2026-07-01
+---
+
+# InputGroup — Component Spec
+
+## Purpose
+
+Monolithic container that flanks an input primitive with optional `#left` and `#right` named slots, joined by vertical seams, and reflects validation state on its border. The middle input goes in the root's `default` slot; the two side regions are simple named slots on the root — the same shape as `input-text`'s `iconLeft` / `iconRight` and `input-number`'s `prefix` / `suffix`, so the API stays consistent with the sibling inputs. Distinct from `field-*` components: `InputGroup` styles the input's *edges*; `field-*` wraps label + helper text. The middle slot expects a raw `<input>` styled `bg-[var(--bg-surface)]`, `text-label-sm`, `text-[var(--text-default)]`, `placeholder:text-[var(--text-muted)]` — matches the group's own surface so the field blends with the root while the side slots stand out as darker `--bg-canvas` islands.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import InputGroup from '@aziontech/webkit/input-group'
+const value = ref('')
+</script>
+
+<template>
+  <InputGroup :invalid="false">
+    <template #left>https://</template>
+    <input
+      v-model="value"
+      placeholder="domain"
+      class="w-full h-full bg-[var(--bg-surface)] border-0 outline-none focus:ring-0 px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)]"
+    />
+    <template #right>.com</template>
+  </InputGroup>
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `invalid` | `boolean` | `false` | no | Renders the error border and sets `aria-invalid="true"` on the root. |
+| `required` | `boolean` | `false` | no | Renders the required (warning) border and sets `aria-required="true"` on the root. |
+| `disabled` | `boolean` | `false` | no | Renders the disabled visual (muted fill, not-allowed cursor, no focus-within ring) and sets `aria-disabled="true"` on the root. Does not propagate to the middle `<input>` — the consumer is responsible for the inner input's own `disabled` attribute (mirrors how `FieldText` disables `InputText`). |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `left` | — | Optional left-side content (icon, static text, or a `<Button>`). When present, rendered inside a styled `<div>` (`bg-[var(--bg-canvas)]`, `px-[var(--spacing-md)]`, `text-label-sm`, `text-[color:var(--text-muted)]`, `border-r border-[color:var(--border-default)]`). |
+| `default` | — | Middle content — a raw `<input>` element (or any input primitive). |
+| `right` | — | Optional right-side content, same styling as `#left` but with `border-l` instead of `border-r`. |
+
+## States
+
+- Visual states on root: `default`, `hover`, `focus-within`, `invalid`, `required`, `disabled`
+- `data-invalid` mirrors the `invalid` prop; sets `aria-invalid="true"`
+- `data-required` mirrors the `required` prop; sets `aria-required="true"`
+- `data-disabled` mirrors the `disabled` prop; sets `aria-disabled="true"`
+- Border semantics mirror `input-text` (independent, not compound):
+  - `data-invalid` → `var(--danger-border)`
+  - `data-required` → `var(--warning-border)`
+- Hover (only when not focus-within, not invalid, not required, not disabled): `border-[var(--border-strong)]`
+- Focus-within: 2-ring at `var(--ring-color)` with `var(--bg-canvas)` offset (suppressed when `data-disabled`)
+- Disabled: `bg-[var(--bg-disabled)]`, `text-[var(--text-disabled)]`, `cursor-not-allowed`, hover ignored, focus-within ring suppressed
+
+## Motion & Animations
+
+| Trigger | Animation / Transition | Token (see `.claude/docs/DESIGN.md` § Animations) | Reduced-motion fallback |
+|---|---|---|---|
+| hover / focus-within / invalid / required state change | `transition-colors duration-150 ease-out` | inline (matches catalog) | `motion-reduce:transition-none` |
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| root surface | `var(--bg-surface)` |
+| root border (default) | `var(--border-default)` |
+| root border (hover) | `var(--border-strong)` |
+| root border (invalid) | `var(--danger-border)` |
+| root border (required) | `var(--warning-border)` |
+| root surface (disabled) | `var(--bg-disabled)` |
+| root text (disabled) | `var(--text-disabled)` |
+| root border width | `border` (Tailwind utility) |
+| root shape | `var(--shape-elements)` |
+| root height | `h-8` (Tailwind utility) |
+| focus ring | `var(--ring-color)` |
+| focus ring offset | `var(--bg-canvas)` |
+| side slot surface | `var(--bg-canvas)` |
+| side slot text | `var(--text-muted)` |
+| side slot padding.x | `var(--spacing-md)` |
+| side slot typography | `.text-label-sm` |
+| left slot seam | `border-r border-[color:var(--border-default)]` |
+| right slot seam | `border-l border-[color:var(--border-default)]` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | — | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: the root shows a `focus-within` ring (`ring-2 ring-[var(--ring-color)] ring-offset-2 ring-offset-[var(--bg-canvas)]`) whenever any descendant (side-slot control or middle input) has focus. The middle input renders `focus:ring-0 outline-none` so the group's ring is the only visible focus indicator. Suppressed when `data-disabled` is present.
+- Keyboard map: `Tab` moves through the side-slot interactive content (if any) and the middle input in DOM order. No custom keybindings on the group.
+- ARIA: root uses `role="group"`; `aria-invalid` and `aria-required` reflect the props. The inner input keeps its own `aria-*` — the group does not duplicate.
+- Contrast ≥4.5:1 for side-slot text against `var(--bg-canvas)`; ≥3:1 for the border in every state.
+- Motion: color transitions on state changes are `duration-150 ease-out` and pair with `motion-reduce:transition-none`.
+- Touch target ≥32×32 px for interactive side-slot content (matches root height `h-8`).
+
+## Stories (Storybook)
+
+- Default — root with a middle input, no side slots filled.
+- WithSlotLeft — `#left` slot filled (e.g. `https://`).
+- WithSlotRight — `#right` slot filled (e.g. `.com`).
+- BothSlots — both `#left` and `#right` filled.
+- WithIcon — `#left` filled with `<i class="pi pi-globe" aria-hidden="true" />`, showing how PrimeIcons inhabit the side slots at the same size as text content.
+- Invalid — `invalid=true` (danger border).
+- Required — `required=true` (warning border).
+- Disabled — `disabled=true` (muted fill, not-allowed cursor, no focus ring).
+
+Justification for eight stories (deviates from Default+Types+Sizes+state pattern): the component has no `kind` and no `size`, so `Types` and `Sizes` do not apply. Four slot-composition stories (Default, WithSlotLeft, WithSlotRight, BothSlots) document each named-slot position individually and combined. `WithIcon` demonstrates that side slots accept `<i>` icons at the same size/color as text content (parallel to `FieldText`'s Icons story). Three state stories exercise `Invalid`, `Required`, and `Disabled` — the visual signals the component can emit.
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export points at `index.ts`, and a standalone `./<name>-root` export points at the root `.vue` (tree-shaking). Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/.specs/label.md b/.specs/label.md
index ffdd08204..e5163f661 100644
--- a/.specs/label.md
+++ b/.specs/label.md
@@ -7,7 +7,7 @@ spec_version: 1
 figma:
   url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=562-6660
   node_id: 562:6660
-checksum: ece9d2e9709b3d49abc00122991f5409b5e98e3dfe85fc8c1bfcbb0f1add5dfd
+checksum: 744bbcf186cef0f22e6259417644544988325d4d720b62a0ab2acd7ea2e6b6b7
 created: 2026-06-15
 last_updated: 2026-06-15
 ---
@@ -16,7 +16,7 @@ last_updated: 2026-06-15
 
 ## Purpose
 
-Form-field label that pairs descriptive text with an optional `Required` badge. Renders a native `<label>` element so consumers can associate it with any input via the standard `for` attribute. Use it above (or beside) any input control in the `inputs` category to communicate the field name and whether it must be filled.
+Form-field label that pairs descriptive text with an optional required indicator. Renders a native `<label>` element so consumers can associate it with any input via the standard `for` attribute. Use it above (or beside) any input control in the `inputs` category to communicate the field name and whether it must be filled. The required indicator is rendered inline as `* (Required)` — the `*` in the primary orange followed by the parenthesized word "(Required)" in muted text — replacing the older `Tag` badge for a lighter typographic signal.
 
 ## Usage
 
@@ -37,7 +37,7 @@ import InputText from '@aziontech/webkit/input-text'
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
 | `value` | `string` | `''` | no | Fallback text when the default slot is empty. |
-| `required` | `boolean` | `false` | no | Appends a `Required` tag next to the label text. |
+| `required` | `boolean` | `false` | no | Appends an inline required indicator (`<span aria-hidden>*</span> (Required)`) next to the label text. The `*` uses `var(--primary)`; "(Required)" inherits `var(--text-muted)`. |
 
 ## Events
 
@@ -64,6 +64,8 @@ _none_
 |---|---|
 | typography | `.text-label-sm` |
 | color (text) | `var(--text-default)` |
+| color (required indicator "(Required)") | `var(--text-muted)` |
+| color (required indicator "*") | `var(--primary)` |
 | gap (required variant) | `var(--spacing-xxs)` |
 
 ## Theme gaps
@@ -76,7 +78,7 @@ _none_
 
 - Root is a native `<label>` element; consumers pass `for="<input-id>"` via attrs to associate it with the corresponding control.
 - Keyboard map: not focusable (decorative wrapper for native `<label>` semantics); clicking the label focuses the associated input via native browser behavior.
-- ARIA: the `Required` indicator is the existing `Tag` component (`severity="warning"`, `size="small"`, content `"Required"`) and is visible text — no extra ARIA needed; consumers that wire the input with `aria-required="true"` keep the programmatic state in sync.
+- ARIA: the required indicator is inline text (`* (Required)`). The `*` character is decorative and marked `aria-hidden="true"` so screen readers announce only "(Required)" together with the label text. Consumers that wire the input with `aria-required="true"` keep the programmatic state in sync.
 - Contrast ≥4.5:1 between `var(--text-default)` and `var(--bg-canvas)`; the warning tag inherits its own contrast guarantees.
 - `motion-reduce:transition-none motion-reduce:transform-none` not applicable (no motion).
 - Touch target: label itself is non-interactive; the associated input owns the ≥40×40 px target.
diff --git a/apps/storybook/src/stories/components/inputs/field-input-group/FieldInputGroup.stories.js b/apps/storybook/src/stories/components/inputs/field-input-group/FieldInputGroup.stories.js
new file mode 100644
index 000000000..535192d3a
--- /dev/null
+++ b/apps/storybook/src/stories/components/inputs/field-input-group/FieldInputGroup.stories.js
@@ -0,0 +1,348 @@
+import Button from '@aziontech/webkit/button'
+import FieldInputGroup from '@aziontech/webkit/field-input-group'
+import { ref } from 'vue'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import FieldInputGroup from '@aziontech/webkit/field-input-group'"
+
+/** @type {import('@storybook/vue3').Meta<typeof FieldInputGroup>} */
+const meta = {
+  title: 'Components/Inputs/FieldInputGroup',
+  component: FieldInputGroup,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          "Form field wrapper around `InputGroup` that composes `Label`, `InputGroup` (with its own middle `<input>` rendered internally), and `HelperText` into a single vertical stack. Mirrors `FieldText`'s API — same `label` / `helperText` / `disabled` / `invalid` / `required` behavior — with the added `#left` and `#right` slots forwarded to `InputGroup`."
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'Two-way bound value of the internal `<input>`.',
+      table: { category: 'props', type: { summary: 'string' } }
+    },
+    label: {
+      control: 'text',
+      description: 'Text rendered inside the `Label`. When empty, the label row is omitted.',
+      table: { category: 'props', type: { summary: 'string' } }
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder forwarded to the internal `<input>`.',
+      table: { category: 'props', type: { summary: 'string' } }
+    },
+    helperText: {
+      control: 'text',
+      description:
+        'Auxiliary text rendered inside `HelperText`. When empty, the helper row is omitted (except when `disabled` — fallback copy is shown).',
+      table: { category: 'props', type: { summary: 'string' } }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the input and the `InputGroup` chrome; switches helper to `kind="disabled"`.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Marks the internal input read-only; value is visible but not editable.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    required: {
+      control: 'boolean',
+      description:
+        'Adds the Required tag to Label, propagates `required` to InputGroup and native input.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    invalid: {
+      control: 'boolean',
+      description:
+        'Sets `invalid` on InputGroup and switches helper to `kind="invalid"`. Also sets `aria-invalid` on the internal input.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    inputId: {
+      control: 'text',
+      description: 'id for the internal input; auto-generated via `useId()` when empty.',
+      table: { category: 'props', type: { summary: 'string' } }
+    },
+    name: {
+      control: 'text',
+      description: 'HTML name for the internal input (form + vee-validate integration).',
+      table: { category: 'props', type: { summary: 'string' } }
+    },
+    left: { control: false, table: { category: 'slots', type: { summary: 'slot' } } },
+    right: { control: false, table: { category: 'slots', type: { summary: 'slot' } } },
+    'onUpdate:modelValue': {
+      action: 'update:modelValue',
+      description: 'Re-emitted from the internal `<input>` on every input event.',
+      table: { category: 'events', type: { summary: 'string' } }
+    }
+  },
+  args: {
+    modelValue: '',
+    label: 'Website',
+    placeholder: 'mysite',
+    helperText: 'Enter the domain without the scheme.',
+    disabled: false,
+    readonly: false,
+    required: false,
+    invalid: false
+  }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { FieldInputGroup },
+  setup() {
+    return { args }
+  },
+  template: '<div class="w-[360px]"><FieldInputGroup v-bind="args" /></div>'
+})
+
+const DEFAULT_MARKUP = `<FieldInputGroup
+  v-model="value"
+  label="Website"
+  placeholder="mysite"
+  helper-text="Enter the domain without the scheme."
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldInputGroup>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: { story: 'Label + internal input + helper text, no side slots filled.' },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const WITH_SLOTS_MARKUP = `<FieldInputGroup
+  v-model="value"
+  label="Website"
+  placeholder="mysite"
+  helper-text="Enter the domain without the scheme."
+>
+  <template #left>https://</template>
+  <template #right>.com</template>
+</FieldInputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldInputGroup>} */
+export const WithSlots = {
+  render: () => ({
+    components: { FieldInputGroup },
+    setup() {
+      const value = ref('')
+      return { value }
+    },
+    template: `
+      <div class="w-[360px]">
+        <FieldInputGroup
+          v-model="value"
+          label="Website"
+          placeholder="mysite"
+          helper-text="Enter the domain without the scheme."
+        >
+          <template #left>https://</template>
+          <template #right>.com</template>
+        </FieldInputGroup>
+      </div>
+    `
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: { story: '`#left` and `#right` slots forwarded to the underlying `InputGroup`.' },
+      source: { code: toSfc(IMPORT, WITH_SLOTS_MARKUP) }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldInputGroup>} */
+export const Required = {
+  render: () => ({
+    components: { FieldInputGroup, Button },
+    setup() {
+      const value = ref('')
+      const missing = ref(false)
+      const loading = ref(false)
+
+      const onSubmit = () => {
+        if (loading.value) return
+        missing.value = false
+        loading.value = true
+        setTimeout(() => {
+          loading.value = false
+          missing.value = !value.value
+        }, 1200)
+      }
+
+      const onUpdate = (next) => {
+        value.value = next
+        if (next) missing.value = false
+      }
+
+      return { value, missing, loading, onSubmit, onUpdate }
+    },
+    template: `
+      <div class="flex flex-col gap-4 w-[360px]">
+        <FieldInputGroup
+          label="Website"
+          placeholder="mysite"
+          :model-value="value"
+          @update:model-value="onUpdate"
+          :required="missing"
+          :disabled="loading"
+          :helper-text="missing ? 'This field is required.' : 'Enter the domain without the scheme.'"
+        >
+          <template #left>https://</template>
+          <template #right>.com</template>
+        </FieldInputGroup>
+        <Button label="Submit" size="medium" :loading="loading" @click="onSubmit" />
+      </div>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Click **Submit** with the field empty: the button shows the loading spinner for ~1.2s and the field locks. When loading finishes, the required check fires — the `Label` gets the Required tag, the InputGroup border turns warning, and the helper switches to the warning "This field is required." copy. Typing any value clears the error.'
+      }
+    }
+  }
+}
+
+const INVALID_MARKUP = `<FieldInputGroup
+  v-model="value"
+  label="Website"
+  model-value="not a domain"
+  helper-text="Enter a valid domain (letters, digits, hyphens)."
+  invalid
+>
+  <template #left>https://</template>
+  <template #right>.com</template>
+</FieldInputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldInputGroup>} */
+export const Invalid = {
+  args: {
+    invalid: true,
+    modelValue: 'not a domain',
+    helperText: 'Enter a valid domain (letters, digits, hyphens).'
+  },
+  render: (args) => ({
+    components: { FieldInputGroup },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="w-[360px]">
+        <FieldInputGroup v-bind="args">
+          <template #left>https://</template>
+          <template #right>.com</template>
+        </FieldInputGroup>
+      </div>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Invalid state — helper switches to `kind="invalid"` (danger tokens) and the InputGroup border turns danger.'
+      },
+      source: { code: toSfc(IMPORT, INVALID_MARKUP) }
+    }
+  }
+}
+
+const DISABLED_MARKUP = `<FieldInputGroup
+  v-model="value"
+  label="Website"
+  model-value="mysite"
+  disabled
+>
+  <template #left>https://</template>
+  <template #right>.com</template>
+</FieldInputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldInputGroup>} */
+export const Disabled = {
+  args: {
+    disabled: true,
+    modelValue: 'mysite',
+    helperText: ''
+  },
+  render: (args) => ({
+    components: { FieldInputGroup },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="w-[360px]">
+        <FieldInputGroup v-bind="args">
+          <template #left>https://</template>
+          <template #right>.com</template>
+        </FieldInputGroup>
+      </div>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Disabled state — helper falls back to "This field is locked." with the lock icon (`kind="disabled"`), the InputGroup surface goes muted, and cursor becomes `not-allowed`.'
+      },
+      source: { code: toSfc(IMPORT, DISABLED_MARKUP) }
+    }
+  }
+}
+
+const ICONS_MARKUP = `<FieldInputGroup
+  v-model="value"
+  label="Website"
+  placeholder="mysite"
+  helper-text="Icons in the side slots parallel FieldText's icon story vocabulary."
+>
+  <template #left><i class="pi pi-globe" aria-hidden="true" /></template>
+  <template #right><i class="pi pi-times" aria-hidden="true" /></template>
+</FieldInputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldInputGroup>} */
+export const Icons = {
+  render: () => ({
+    components: { FieldInputGroup },
+    setup() {
+      const value = ref('')
+      return { value }
+    },
+    template: `
+      <div class="w-[360px]">
+        <FieldInputGroup
+          v-model="value"
+          label="Website"
+          placeholder="mysite"
+          helper-text="Icons in the side slots parallel FieldText's icon story vocabulary."
+        >
+          <template #left><i class="pi pi-globe" aria-hidden="true" /></template>
+          <template #right><i class="pi pi-times" aria-hidden="true" /></template>
+        </FieldInputGroup>
+      </div>
+    `
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'PrimeIcons flanking the internal input inside `InputGroup`\'s side slots. Same vocabulary as `FieldText`\'s Icons story.'
+      },
+      source: { code: toSfc(IMPORT, ICONS_MARKUP) }
+    }
+  }
+}
diff --git a/apps/storybook/src/stories/components/inputs/input-group/InputGroup.stories.js b/apps/storybook/src/stories/components/inputs/input-group/InputGroup.stories.js
new file mode 100644
index 000000000..2d1414423
--- /dev/null
+++ b/apps/storybook/src/stories/components/inputs/input-group/InputGroup.stories.js
@@ -0,0 +1,224 @@
+import InputGroup from '@aziontech/webkit/input-group'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import InputGroup from '@aziontech/webkit/input-group'"
+
+const MIDDLE_INPUT =
+  '<input placeholder="domain" class="w-full h-full bg-[var(--bg-surface)] border-0 outline-none focus:ring-0 px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)]" />'
+
+/** @type {import('@storybook/vue3').Meta<typeof InputGroup>} */
+const meta = {
+  title: 'Components/Inputs/InputGroup',
+  component: InputGroup,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          "Monolithic container that flanks an input primitive with optional `#left` and `#right` named slots, joined by vertical seams, and reflects validation state on its border. The middle input goes in the root's `default` slot."
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    invalid: {
+      control: 'boolean',
+      description: 'Renders the error border and sets `aria-invalid="true"` on the root.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Renders the required (warning) border and sets `aria-required="true"` on the root.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    disabled: {
+      control: 'boolean',
+      description:
+        'Renders the disabled visual (muted fill, not-allowed cursor, no focus ring) and sets `aria-disabled="true"` on the root.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    }
+  },
+  args: {
+    invalid: false,
+    required: false,
+    disabled: false
+  }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { InputGroup },
+  setup() {
+    return { props: args }
+  },
+  template: `<InputGroup :invalid="props.invalid" :required="props.required" :disabled="props.disabled">${MIDDLE_INPUT}</InputGroup>`
+})
+
+const DEFAULT_MARKUP = `<InputGroup>
+  ${MIDDLE_INPUT}
+</InputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof InputGroup>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: { story: 'Root with only a raw `<input>` in the middle slot and no side slots.' },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const WITH_SLOT_LEFT_MARKUP = `<InputGroup>
+  <template #left>https://</template>
+  ${MIDDLE_INPUT}
+</InputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof InputGroup>} */
+export const WithSlotLeft = {
+  render: () => ({
+    components: { InputGroup },
+    template: WITH_SLOT_LEFT_MARKUP
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: { story: 'The `#left` named slot filled with static text before the middle input.' },
+      source: { code: toSfc(IMPORT, WITH_SLOT_LEFT_MARKUP) }
+    }
+  }
+}
+
+const WITH_SLOT_RIGHT_MARKUP = `<InputGroup>
+  ${MIDDLE_INPUT}
+  <template #right>.com</template>
+</InputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof InputGroup>} */
+export const WithSlotRight = {
+  render: () => ({
+    components: { InputGroup },
+    template: WITH_SLOT_RIGHT_MARKUP
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: { story: 'The `#right` named slot filled with static text after the middle input.' },
+      source: { code: toSfc(IMPORT, WITH_SLOT_RIGHT_MARKUP) }
+    }
+  }
+}
+
+const BOTH_SLOTS_MARKUP = `<InputGroup>
+  <template #left>https://</template>
+  ${MIDDLE_INPUT}
+  <template #right>.com</template>
+</InputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof InputGroup>} */
+export const BothSlots = {
+  render: () => ({
+    components: { InputGroup },
+    template: BOTH_SLOTS_MARKUP
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: { story: 'Both `#left` and `#right` slots filled, flanking the middle input.' },
+      source: { code: toSfc(IMPORT, BOTH_SLOTS_MARKUP) }
+    }
+  }
+}
+
+const WITH_ICON_MARKUP = `<InputGroup>
+  <template #left><i class="pi pi-globe" aria-hidden="true" /></template>
+  ${MIDDLE_INPUT}
+  <template #right><i class="pi pi-times" aria-hidden="true" /></template>
+</InputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof InputGroup>} */
+export const WithIcon = {
+  render: () => ({
+    components: { InputGroup },
+    template: WITH_ICON_MARKUP
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'PrimeIcons in the side slots. Icons inherit the slot text tokens (12px, muted color) — same visual treatment as text content.'
+      },
+      source: { code: toSfc(IMPORT, WITH_ICON_MARKUP) }
+    }
+  }
+}
+
+const INVALID_MARKUP = `<InputGroup :invalid="true">
+  <template #left>https://</template>
+  ${MIDDLE_INPUT}
+  <template #right>.com</template>
+</InputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof InputGroup>} */
+export const Invalid = {
+  render: () => ({
+    components: { InputGroup },
+    template: INVALID_MARKUP
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: { story: 'Invalid state — root shows the danger border.' },
+      source: { code: toSfc(IMPORT, INVALID_MARKUP) }
+    }
+  }
+}
+
+const REQUIRED_MARKUP = `<InputGroup :required="true">
+  <template #left>https://</template>
+  ${MIDDLE_INPUT}
+  <template #right>.com</template>
+</InputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof InputGroup>} */
+export const Required = {
+  render: () => ({
+    components: { InputGroup },
+    template: REQUIRED_MARKUP
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: { story: 'Required state — root shows the warning border.' },
+      source: { code: toSfc(IMPORT, REQUIRED_MARKUP) }
+    }
+  }
+}
+
+const DISABLED_MARKUP = `<InputGroup :disabled="true">
+  <template #left>https://</template>
+  ${MIDDLE_INPUT}
+  <template #right>.com</template>
+</InputGroup>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof InputGroup>} */
+export const Disabled = {
+  render: () => ({
+    components: { InputGroup },
+    template: DISABLED_MARKUP
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'Disabled state — muted fill, not-allowed cursor, focus-within ring suppressed. Note: the consumer must also set `disabled` on their middle `<input>`; InputGroup does not propagate it.'
+      },
+      source: { code: toSfc(IMPORT, DISABLED_MARKUP) }
+    }
+  }
+}
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index c0fbaa4f2..36fbc3f26 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -127,8 +127,10 @@
     "./progress-bar": "./src/components/feedback/progress-bar/progress-bar.vue",
     "./calendar": "./src/components/inputs/calendar/calendar.vue",
     "./input-text": "./src/components/inputs/input-text/input-text.vue",
+    "./input-group": "./src/components/inputs/input-group/input-group.vue",
     "./input-number": "./src/components/inputs/input-number/input-number.vue",
     "./field-text": "./src/components/inputs/field-text/field-text.vue",
+    "./field-input-group": "./src/components/inputs/field-input-group/field-input-group.vue",
     "./helper-text": "./src/components/inputs/helper-text/helper-text.vue",
     "./label": "./src/components/inputs/label/label.vue",
     "./input-password": "./src/components/inputs/input-password/input-password.vue",
diff --git a/packages/webkit/src/components/inputs/field-input-group/field-input-group.vue b/packages/webkit/src/components/inputs/field-input-group/field-input-group.vue
new file mode 100644
index 000000000..22ba6ddb8
--- /dev/null
+++ b/packages/webkit/src/components/inputs/field-input-group/field-input-group.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+  import { computed, useAttrs, useId } from 'vue'
+
+  import HelperText, { type HelperTextKind } from '../helper-text/helper-text.vue'
+  import InputGroup from '../input-group/input-group.vue'
+  import Label from '../label/label.vue'
+
+  defineOptions({
+    name: 'FieldInputGroup',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Two-way bound value of the internal input. */
+    modelValue?: string
+    /** Text rendered inside the Label. When empty, the label row is omitted. */
+    label?: string
+    /** Placeholder forwarded to the internal input. */
+    placeholder?: string
+    /** Auxiliary text rendered inside HelperText. When empty, the helper row is omitted. */
+    helperText?: string
+    /** Disables the input and the InputGroup chrome; switches helper to kind=disabled. */
+    disabled?: boolean
+    /** Marks the internal input read-only; value is visible but not editable. */
+    readonly?: boolean
+    /** Adds the Required tag to Label and propagates required to InputGroup and input. */
+    required?: boolean
+    /** Applies invalid border on InputGroup and switches helper to kind=invalid. */
+    invalid?: boolean
+    /** id for the internal input; consumed by Label via for and by aria-describedby wiring. */
+    inputId?: string
+    /** HTML name for the internal input (form + vee-validate integration). */
+    name?: string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    modelValue: '',
+    label: '',
+    placeholder: '',
+    helperText: '',
+    disabled: false,
+    readonly: false,
+    required: false,
+    invalid: false,
+    inputId: '',
+    name: ''
+  })
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: string]
+  }>()
+
+  defineSlots<{
+    left(): unknown
+    right(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const generatedId = useId()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'input-field-input-group'
+  )
+
+  const resolvedInputId = computed(() => props.inputId || generatedId)
+  const helperId = computed(() => `${resolvedInputId.value}-helper`)
+
+  const helperKind = computed<HelperTextKind>(() => {
+    if (props.disabled) return 'disabled'
+    if (props.invalid) return 'invalid'
+    if (props.required) return 'required'
+    return 'helper'
+  })
+
+  const effectiveHelperText = computed(() => {
+    if (props.helperText) return props.helperText
+    if (props.disabled) return 'This field is locked.'
+    return ''
+  })
+
+  const describedBy = computed(() => (effectiveHelperText.value ? helperId.value : undefined))
+
+  const onInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    emit('update:modelValue', target.value)
+  }
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-disabled="disabled || null"
+    :data-invalid="invalid || null"
+    :data-required="required || null"
+    class="flex flex-col gap-[var(--spacing-xs)] w-full"
+  >
+    <Label
+      v-if="label"
+      :value="label"
+      :required="required"
+      :for="resolvedInputId"
+      :data-testid="`${testId}__label`"
+    />
+    <InputGroup
+      :invalid="invalid"
+      :required="required"
+      :disabled="disabled"
+      :data-testid="`${testId}__group`"
+    >
+      <template
+        v-if="$slots['left']"
+        #left
+      >
+        <slot name="left" />
+      </template>
+      <input
+        :id="resolvedInputId"
+        :name="name"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :aria-invalid="invalid || undefined"
+        :aria-required="required || undefined"
+        :aria-describedby="describedBy"
+        class="w-full h-full bg-transparent border-0 outline-none focus:ring-0 px-[var(--spacing-md)] text-label-sm text-[var(--text-default)] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
+        @input="onInput"
+      />
+      <template
+        v-if="$slots['right']"
+        #right
+      >
+        <slot name="right" />
+      </template>
+    </InputGroup>
+    <HelperText
+      v-if="effectiveHelperText"
+      :id="helperId"
+      :value="effectiveHelperText"
+      :kind="helperKind"
+      :data-testid="`${testId}__helper`"
+    />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/inputs/input-group/input-group.vue b/packages/webkit/src/components/inputs/input-group/input-group.vue
new file mode 100644
index 000000000..b9e9c6ba6
--- /dev/null
+++ b/packages/webkit/src/components/inputs/input-group/input-group.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+  import { computed, useAttrs, useSlots } from 'vue'
+
+  defineOptions({ name: 'InputGroup', inheritAttrs: false })
+
+  export interface Props {
+    /** Renders the error border and sets aria-invalid on the root. */
+    invalid?: boolean
+    /** Renders the required (warning) border and sets aria-required on the root. */
+    required?: boolean
+    /** Renders the disabled visual (muted fill, not-allowed cursor, no focus ring) and sets aria-disabled on the root. Does not propagate to the middle input — the consumer must set the input disabled attribute themselves. */
+    disabled?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    invalid: false,
+    required: false,
+    disabled: false
+  })
+
+  defineSlots<{
+    left(): unknown
+    default(): unknown
+    right(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const slots = useSlots()
+
+  const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'input-group')
+  const hasLeft = computed(() => Boolean(slots['left']))
+  const hasRight = computed(() => Boolean(slots['right']))
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    role="group"
+    :data-testid="testId"
+    :data-invalid="props.invalid || null"
+    :data-required="props.required || null"
+    :data-disabled="props.disabled || null"
+    :aria-invalid="props.invalid ? 'true' : undefined"
+    :aria-required="props.required ? 'true' : undefined"
+    :aria-disabled="props.disabled ? 'true' : undefined"
+    class="relative inline-flex items-center w-full h-8 overflow-hidden rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface)] transition-colors duration-150 ease-out motion-reduce:transition-none [&:not(:focus-within):not([data-invalid]):not([data-required]):not([data-disabled])]:hover:border-[var(--border-strong)] focus-within:outline-none focus-within:ring-2 focus-within:ring-[var(--ring-color)] focus-within:ring-offset-2 focus-within:ring-offset-[var(--bg-canvas)] data-[invalid]:border-[var(--danger-border)] data-[required]:border-[var(--warning-border)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:focus-within:ring-0 data-[disabled]:focus-within:ring-offset-0"
+  >
+    <div
+      v-if="hasLeft"
+      data-testid="input-group-slot-left"
+      class="flex items-center self-stretch shrink-0 bg-[var(--bg-canvas)] px-[var(--spacing-md)] text-label-sm text-[color:var(--text-muted)] border-r border-[color:var(--border-default)]"
+    >
+      <slot name="left" />
+    </div>
+    <slot />
+    <div
+      v-if="hasRight"
+      data-testid="input-group-slot-right"
+      class="flex items-center self-stretch shrink-0 bg-[var(--bg-canvas)] px-[var(--spacing-md)] text-label-sm text-[color:var(--text-muted)] border-l border-[color:var(--border-default)]"
+    >
+      <slot name="right" />
+    </div>
+  </div>
+</template>
diff --git a/packages/webkit/src/components/inputs/label/label.vue b/packages/webkit/src/components/inputs/label/label.vue
index 3f620fb51..77e3e97ce 100644
--- a/packages/webkit/src/components/inputs/label/label.vue
+++ b/packages/webkit/src/components/inputs/label/label.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
   import { computed, useAttrs } from 'vue'
 
-  import Tag from '../../tag/tag.vue'
-
   defineOptions({
     name: 'Label',
     inheritAttrs: false
@@ -11,7 +9,7 @@
   interface Props {
     /** Fallback text when the default slot is empty. */
     value?: string
-    /** Appends a `Required` tag next to the label text. */
+    /** Appends a required indicator (an orange asterisk followed by the word "Required") next to the label text. */
     required?: boolean
   }
 
@@ -41,12 +39,17 @@
       <slot v-if="$slots['default']" />
       <template v-else-if="value">{{ value }}</template>
     </span>
-    <Tag
+    <span
       v-if="required"
-      value="Required"
-      severity="warning"
-      size="small"
       :data-testid="`${testId}__required`"
-    />
+      class="text-label-sm text-[var(--text-muted)]"
+    >
+      <span
+        aria-hidden="true"
+        class="text-[var(--primary)]"
+        >*</span
+      >
+      (Required)
+    </span>
   </label>
 </template>