diff --git a/.changeset/form-fields-redesign.md b/.changeset/form-fields-redesign.md
new file mode 100644
index 000000000..38aa5c80d
--- /dev/null
+++ b/.changeset/form-fields-redesign.md
@@ -0,0 +1,6 @@
+---
+'@workflowbuilder/ui': major
+'@workflowbuilder/sdk': minor
+---
+
+Input and TextArea now use `state` instead of `error`, letter-based sizes, `prefixIcon`/`suffixIcon` instead of `startAdornment`/`endAdornment`, and an optional clear action. Their shared field composition now provides associated labels and helper text.
diff --git a/apps/docs/scripts/generate-ui-api.mjs b/apps/docs/scripts/generate-ui-api.mjs
index 72918571d..ac9e83ac4 100644
--- a/apps/docs/scripts/generate-ui-api.mjs
+++ b/apps/docs/scripts/generate-ui-api.mjs
@@ -72,7 +72,9 @@ function findTypeByName(root, name, warnings) {
     for (const child of node.children ?? []) walk(child);
   })(root);
   if (matches.length > 1 && warnings) {
-    warnings.push(`type name "${name}" is ambiguous (${matches.length} declarations) - the table would document whichever TypeDoc emitted first`);
+    warnings.push(
+      `type name "${name}" is ambiguous (${matches.length} declarations) - the table would document whichever TypeDoc emitted first`,
+    );
   }
   return matches[0] ?? null;
 }
@@ -270,8 +272,7 @@ function collectVariantProps(propsTypeNames, project, byId, warnings, slug, cont
     const sharedByAll = occurrences.length === perVariant.length && distinctTypes.size === 1;
 
     // Required in every variant, else the table documents an impossible call.
-    const requiredEverywhere =
-      occurrences.length === perVariant.length && occurrences.every((o) => o.prop.required);
+    const requiredEverywhere = occurrences.length === perVariant.length && occurrences.every((o) => o.prop.required);
     const requiredInItsVariants = !requiredEverywhere && occurrences.every((o) => o.prop.required);
 
     const base = occurrences[0].prop;
@@ -299,7 +300,7 @@ function collectVariantProps(propsTypeNames, project, byId, warnings, slug, cont
   return merged;
 }
 
-function extractCssVariables(directory, warnings, slug) {
+function extractCssVariables(directory, cssSources, warnings, slug) {
   // No directory - the entry documents an API, not a styled component.
   if (!directory) return [];
 
@@ -316,11 +317,17 @@ function extractCssVariables(directory, warnings, slug) {
 
   const files = globSync('**/*.css', { cwd: abs })
     .filter((file) => !nestedPrefixes.some((prefix) => file.startsWith(prefix)))
-    .sort();
+    .sort()
+    .map((file) => path.resolve(abs, file));
+  for (const source of cssSources ?? []) {
+    const sourcePath = path.resolve(uiSource, source);
+    if (existsSync(sourcePath)) files.push(sourcePath);
+    else warnings.push(`"${slug}": CSS source ${source} does not exist`);
+  }
   const seen = new Set();
   const variables = [];
   for (const file of files) {
-    const css = readFileSync(path.resolve(abs, file), 'utf8');
+    const css = readFileSync(file, 'utf8');
     const re = /(--ax-public-[\w-]+)\s*:\s*([^;]*?)(?:\/\*\s*(.*?)\s*\*\/)?\s*;/g;
     let m;
     while ((m = re.exec(css))) {
@@ -374,9 +381,9 @@ async function main() {
     let props = [];
     const context = { warnings, slug: component.slug };
     if (Array.isArray(component.propsType)) {
-      props = [...collectVariantProps(component.propsType, project, byId, warnings, component.slug, context).values()].sort(
-        (a, b) => a.name.localeCompare(b.name),
-      );
+      props = [
+        ...collectVariantProps(component.propsType, project, byId, warnings, component.slug, context).values(),
+      ].sort((a, b) => a.name.localeCompare(b.name));
     } else if (component.propsType) {
       const typeNode = findTypeByName(project, component.propsType, warnings);
       if (typeNode) {
@@ -392,7 +399,7 @@ async function main() {
       name: component.name,
       props,
       nativeElement: context.nativeElement ?? null,
-      cssVariables: extractCssVariables(component.dir, warnings, component.slug),
+      cssVariables: extractCssVariables(component.dir, component.cssSources, warnings, component.slug),
     };
   }
 
diff --git a/apps/docs/scripts/ui-components.mjs b/apps/docs/scripts/ui-components.mjs
index d8e15e5cf..72627dafc 100644
--- a/apps/docs/scripts/ui-components.mjs
+++ b/apps/docs/scripts/ui-components.mjs
@@ -18,7 +18,17 @@ export const COMPONENTS = [
   { slug: 'collapsible', name: 'Collapsible', propsType: 'CollapsibleProps', dir: 'collapsible' },
   { slug: 'date-picker', name: 'DatePicker', propsType: 'DatePickerProps', dir: 'date-picker' },
   { slug: 'icon-switch', name: 'IconSwitch', propsType: 'IconSwitchProps', dir: 'switch/icon-switch' },
-  { slug: 'input', name: 'Input', propsType: 'InputProps', dir: 'input' },
+  {
+    slug: 'input',
+    name: 'Input',
+    propsType: 'InputProps',
+    dir: 'input',
+    cssSources: [
+      'shared/components/field/field.module.css',
+      'shared/styles/field-control-height.module.css',
+      'shared/styles/field-control-size.module.css',
+    ],
+  },
   { slug: 'menu', name: 'Menu', propsType: 'MenuProps', dir: 'menu' },
   { slug: 'modal', name: 'Modal', propsType: 'ModalProps', dir: 'modal' },
   {
@@ -39,7 +49,13 @@ export const COMPONENTS = [
   { slug: 'snackbar', name: 'Snackbar', propsType: 'SnackbarProps', dir: 'snackbar' },
   { slug: 'status', name: 'Status', propsType: 'StatusProps', dir: 'status' },
   { slug: 'switch', name: 'Switch', propsType: 'BaseSwitchProps', dir: 'switch' },
-  { slug: 'text-area', name: 'TextArea', propsType: 'TextAreaProps', dir: 'text-area' },
+  {
+    slug: 'text-area',
+    name: 'TextArea',
+    propsType: 'TextAreaProps',
+    dir: 'text-area',
+    cssSources: ['shared/components/field/field.module.css', 'shared/styles/field-control-size.module.css'],
+  },
   { slug: 'tooltip', name: 'Tooltip', propsType: 'TooltipProps', dir: 'tooltip' },
   // Diagram components.
   { slug: 'node-icon', name: 'NodeIcon', propsType: 'NodeIconProps', dir: 'node/node-icon' },
diff --git a/apps/docs/src/components/ui-examples/input.tsx b/apps/docs/src/components/ui-examples/input.tsx
index f1d4cc4b2..4ef9748e6 100644
--- a/apps/docs/src/components/ui-examples/input.tsx
+++ b/apps/docs/src/components/ui-examples/input.tsx
@@ -1,14 +1,48 @@
+import { MagnifyingGlass } from '@phosphor-icons/react';
 import { Input } from '@workflowbuilder/ui';
 import { useState } from 'react';
 
 import { ComponentPreview } from './component-preview';
 
 export function InputExample() {
-  const [value, setValue] = useState('');
+  const [search, setSearch] = useState('');
+  const [projectName, setProjectName] = useState('');
+  const [displayName, setDisplayName] = useState('');
 
   return (
     <ComponentPreview>
-      <Input placeholder="Type something" value={value} onChange={(event) => setValue(event.target.value)} />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--wb-space-100)' }}>
+        <Input
+          size="l"
+          label="Search"
+          prefixIcon={<MagnifyingGlass />}
+          placeholder="Large input"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          onClear={() => setSearch('')}
+          clearLabel="Clear search"
+        />
+        <Input
+          size="m"
+          state="critical"
+          label="Project name"
+          helperText="Enter at least three characters"
+          isRequired
+          placeholder="Critical input"
+          value={projectName}
+          onChange={(event) => setProjectName(event.target.value)}
+        />
+        <Input
+          size="s"
+          state="success"
+          label="Display name"
+          helperText="Name is available"
+          placeholder="Successful input"
+          value={displayName}
+          onChange={(event) => setDisplayName(event.target.value)}
+        />
+        <Input label="Identifier" size="xs" state="read-only" value="Read-only value" />
+      </div>
     </ComponentPreview>
   );
 }
diff --git a/apps/docs/src/components/ui-examples/text-area.tsx b/apps/docs/src/components/ui-examples/text-area.tsx
index d0d45749d..31a73258a 100644
--- a/apps/docs/src/components/ui-examples/text-area.tsx
+++ b/apps/docs/src/components/ui-examples/text-area.tsx
@@ -4,11 +4,33 @@ import { useState } from 'react';
 import { ComponentPreview } from './component-preview';
 
 export function TextAreaExample() {
-  const [value, setValue] = useState('');
+  const [description, setDescription] = useState('');
+  const [summary, setSummary] = useState('');
 
   return (
     <ComponentPreview>
-      <TextArea placeholder="Multi-line input" value={value} onChange={(event) => setValue(event.target.value)} />
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--wb-space-100)' }}>
+        <TextArea
+          size="l"
+          label="Description"
+          placeholder="Large text area"
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+          onClear={() => setDescription('')}
+          clearLabel="Clear description"
+        />
+        <TextArea
+          size="m"
+          state="critical"
+          label="Summary"
+          helperText="A summary is required"
+          isRequired
+          placeholder="Critical text area"
+          value={summary}
+          onChange={(event) => setSummary(event.target.value)}
+        />
+        <TextArea label="Notes" size="s" state="read-only" value="Read-only value" />
+      </div>
     </ComponentPreview>
   );
 }
diff --git a/apps/docs/src/content/docs/ui-library/ui-components/index.mdx b/apps/docs/src/content/docs/ui-library/ui-components/index.mdx
index 47c7f01aa..e2d67c132 100644
--- a/apps/docs/src/content/docs/ui-library/ui-components/index.mdx
+++ b/apps/docs/src/content/docs/ui-library/ui-components/index.mdx
@@ -15,7 +15,7 @@ live, interactive example plus the component's props and CSS variables.
 - [Checkbox](/ui-library/ui-components/checkbox/) - Checked, unchecked, and indeterminate states.
 - [Collapsible](/ui-library/ui-components/collapsible/) - Expand and collapse a content section.
 - [DatePicker](/ui-library/ui-components/date-picker/) - Date selection with a calendar popover.
-- [Input](/ui-library/ui-components/input/) - Text input with adornments and an error state.
+- [Input](/ui-library/ui-components/input/) - Text input with icons and explicit field states.
 - [Menu](/ui-library/ui-components/menu/) - Popup menu for dropdowns.
 - [Modal](/ui-library/ui-components/modal/) - Dialog overlay with a backdrop.
 - [NavButton](/ui-library/ui-components/nav-button/) - Compact icon / label navigation button.
diff --git a/apps/docs/src/content/docs/ui-library/ui-components/input.mdx b/apps/docs/src/content/docs/ui-library/ui-components/input.mdx
index 083174679..e8e5e9d6f 100644
--- a/apps/docs/src/content/docs/ui-library/ui-components/input.mdx
+++ b/apps/docs/src/content/docs/ui-library/ui-components/input.mdx
@@ -1,6 +1,6 @@
 ---
 title: Input
-description: A single-line text field with optional adornments and an error state.
+description: A single-line text field with icons, explicit states, and four sizes.
 ---
 
 import CssVariablesTable from '../../../../components/api/css-variables-table.astro';
@@ -8,7 +8,9 @@ import PropsTable from '../../../../components/api/props-table.astro';
 import { InputExample } from '../../../../components/ui-examples/input';
 
 An `Input` is a single-line text field for collecting short, free-form text. It
-supports start and end adornments, an error state, and the standard input sizes.
+supports prefix and suffix icons, a clear affordance, four letter sizes, and the
+`default`, `critical`, `success`, and `read-only` states. A read-only field stays
+focusable so its value can be selected and copied.
 
 <InputExample client:visible />
 
@@ -20,7 +22,22 @@ import { useState } from 'react';
 
 function Example() {
   const [value, setValue] = useState('');
-  return <Input placeholder="Type something" value={value} onChange={(event) => setValue(event.target.value)} />;
+  const hasError = value.length > 0 && value.length < 3;
+
+  return (
+    <Input
+      size="m"
+      state={hasError ? 'critical' : 'default'}
+      label="Project name"
+      helperText={hasError ? 'Enter at least three characters' : 'Shown throughout the workspace'}
+      isRequired
+      placeholder="Type something"
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      onClear={() => setValue('')}
+      clearLabel="Clear project name"
+    />
+  );
 }
 ```
 
diff --git a/apps/docs/src/content/docs/ui-library/ui-components/text-area.mdx b/apps/docs/src/content/docs/ui-library/ui-components/text-area.mdx
index 847cee5ab..11c5c4d95 100644
--- a/apps/docs/src/content/docs/ui-library/ui-components/text-area.mdx
+++ b/apps/docs/src/content/docs/ui-library/ui-components/text-area.mdx
@@ -8,8 +8,8 @@ import PropsTable from '../../../../components/api/props-table.astro';
 import { TextAreaExample } from '../../../../components/ui-examples/text-area';
 
 A `TextArea` is a multi-line text field for longer, free-form input. It
-auto-resizes to fit its content and supports row limits, an error state, and the
-standard input sizes.
+auto-resizes to fit its content and supports row limits, letter sizes, icon
+slots, a clear affordance, and explicit validation and read-only states.
 
 <TextAreaExample client:visible />
 
@@ -21,7 +21,17 @@ import { useState } from 'react';
 
 function Example() {
   const [value, setValue] = useState('');
-  return <TextArea placeholder="Multi-line input" value={value} onChange={(event) => setValue(event.target.value)} />;
+  return (
+    <TextArea
+      size="m"
+      state={value ? 'success' : 'default'}
+      label="Description"
+      helperText="Explain what this workflow does"
+      placeholder="Multi-line input"
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+    />
+  );
 }
 ```
 
diff --git a/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx b/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx
index 4b214092f..f7b5f293f 100644
--- a/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx
@@ -34,7 +34,7 @@ function TextAreaControl(props: TextAreaControlProps) {
         placeholder={placeholder}
         onChange={onChange}
         onBlur={onBlur}
-        size="medium"
+        size="m"
       />
     </ControlWrapper>
   );
diff --git a/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx b/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx
index 5c2c4e9e4..f1d4aec4f 100644
--- a/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx
@@ -51,7 +51,7 @@ function TextControl(props: TextControlProps) {
         value={inputValue}
         onChange={onChange}
         onBlur={onBlur}
-        error={hasErrors}
+        state={hasErrors ? 'critical' : 'default'}
         disabled={isDisabled}
         placeholder={placeholder}
       />
diff --git a/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.tsx b/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.tsx
index 36fd873ff..42d746de2 100644
--- a/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.tsx
+++ b/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.tsx
@@ -88,9 +88,7 @@ export function DynamicTypedInput({
         className={className}
         value={value}
         onChange={(event) => onChange(event.target.value as string)}
-        // Adornment here doesn't make sense since we show variable picker above
-        // endAdornment={endAdornment}
-        error={isError || isInvalidNumberValue}
+        state={isError || isInvalidNumberValue ? 'critical' : 'default'}
         placeholder={
           placeholder ??
           t(baseType === 'number' ? 'variables.placeholderTypeNumber' : 'variables.placeholderTypeString')
@@ -104,13 +102,13 @@ export function DynamicTypedInput({
     return (
       <div className={styles['container--select']}>
         <Select
+          error={isError}
           className={className}
           value={value}
           items={itemsForBoolean}
           onChange={(_event, value) => onChange(value as string)}
           placeholder={placeholder}
           disabled={disabled}
-          error={isError}
         />
         {endAdornment && <span className={styles['adornment--select']}>{endAdornment}</span>}
       </div>
@@ -121,6 +119,7 @@ export function DynamicTypedInput({
     return (
       <div className={styles['date-with-reset-container']}>
         <DatePicker
+          error={isError}
           key={value}
           className={clsx(styles['date-picker'], className)}
           value={getDateIfValid(value)}
@@ -131,7 +130,6 @@ export function DynamicTypedInput({
           }}
           valueFormat={'dd-MM-yyyy'}
           placeholder={placeholder || 'DD-MM-YYYY'}
-          error={isError}
           disabled={disabled}
         />
         {endAdornment && <span className={styles['adornment--date']}>{endAdornment}</span>}
@@ -145,6 +143,7 @@ export function DynamicTypedInput({
     return (
       <div className={styles['row']}>
         <DatePicker
+          error={isError}
           key={value}
           className={clsx(styles['date-picker'], className)}
           value={date}
@@ -159,12 +158,12 @@ export function DynamicTypedInput({
           // valueFormat="DD-MM-YYYY HH:mm"
           // placeholder="DD-MM-YYYY HH:mm"
           disabled={disabled}
-          error={isError}
         />
         <Input
           className={className}
           value={time}
           placeholder="HH:mm"
+          suffixIcon={endAdornment}
           onChange={(event) => {
             const value = (event.target.value as string).slice(0, 5);
             if (value.length < 5) {
@@ -190,8 +189,7 @@ export function DynamicTypedInput({
             }
           }}
           disabled={disabled || !date}
-          error={isError}
-          endAdornment={endAdornment}
+          state={isError ? 'critical' : 'default'}
         />
       </div>
     );
diff --git a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
index e0cab7521..72f6c51f7 100644
--- a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
+++ b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
@@ -18,13 +18,13 @@
   transition: all var(--ax-public-transition);
 
   &.control--error {
-    background-color: var(--ax-public-input-root-background-color-error);
-    border-color: var(--ax-public-input-root-border-color-error);
-    color: var(--ax-public-input-root-color-error);
+    background-color: var(--ax-public-input-root-background-color-critical);
+    border-color: var(--ax-public-input-root-border-color-critical);
+    color: var(--ax-public-input-root-color-critical);
 
     .mention {
-      border: 1px solid color-mix(in srgb, var(--ax-public-input-root-border-color-error), transparent 90%);
-      background-color: color-mix(in srgb, var(--ax-public-input-root-border-color-error), transparent 90%);
+      border: 1px solid color-mix(in srgb, var(--ax-public-input-root-border-color-critical), transparent 90%);
+      background-color: color-mix(in srgb, var(--ax-public-input-root-border-color-critical), transparent 90%);
     }
   }
 }
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-form/variable-form.tsx b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-form/variable-form.tsx
index dc5703e3d..d4c255f90 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-form/variable-form.tsx
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-form/variable-form.tsx
@@ -88,7 +88,7 @@ export function VariableForm(props: Props) {
       <FormControlWithLabel label="common.name" required>
         <Input
           value={formData.name}
-          error={formData.fieldsWithErrors.has('name')}
+          state={formData.fieldsWithErrors.has('name') ? 'critical' : 'default'}
           placeholder={t('common.namePlaceholder')}
           onChange={(event) => handleInputUpdate('name', event.target.value)}
         />
@@ -114,12 +114,12 @@ export function VariableForm(props: Props) {
       <FormControlWithLabel label="common.description">
         <TextArea
           value={formData.description}
-          error={formData.fieldsWithErrors.has('description')}
+          state={formData.fieldsWithErrors.has('description') ? 'critical' : 'default'}
           placeholder={t('common.descriptionPlaceholder')}
           onChange={(event) => handleInputUpdate('description', event.target.value)}
           minRows={3}
           maxRows={3}
-          size="medium"
+          size="m"
         />
       </FormControlWithLabel>
       <div className={styles['buttons']}>
diff --git a/packages/ui/src/components/date-picker/date-picker.module.css b/packages/ui/src/components/date-picker/date-picker.module.css
index 701b66a61..e935e9b94 100644
--- a/packages/ui/src/components/date-picker/date-picker.module.css
+++ b/packages/ui/src/components/date-picker/date-picker.module.css
@@ -11,9 +11,9 @@
     }
 
     &.container--error {
-      background-color: var(--ax-public-input-root-background-color-error);
-      border-color: var(--ax-public-input-root-border-color-error);
-      color: var(--ax-public-input-root-color-error);
+      background-color: var(--ax-public-input-root-background-color-critical);
+      border-color: var(--ax-public-input-root-border-color-critical);
+      color: var(--ax-public-input-root-color-critical);
     }
 
     &.container--placeholder {
diff --git a/packages/ui/src/components/input/index.ts b/packages/ui/src/components/input/index.ts
index 04f79060d..54aa5b8fc 100644
--- a/packages/ui/src/components/input/index.ts
+++ b/packages/ui/src/components/input/index.ts
@@ -1,2 +1,3 @@
 export * from './input';
 export * from './types';
+export { FIELD_STATES, type FieldState } from '@ui/shared/types/field';
diff --git a/packages/ui/src/components/input/input-root.module.css b/packages/ui/src/components/input/input-root.module.css
index 75971ce0f..d81d6629c 100644
--- a/packages/ui/src/components/input/input-root.module.css
+++ b/packages/ui/src/components/input/input-root.module.css
@@ -3,33 +3,73 @@
     display: flex;
     align-items: center;
     cursor: text;
+    background-color: var(--ax-public-input-root-background-color);
+    border: var(--ax-public-input-root-border-size) solid var(--ax-public-input-root-border-color);
+    color: var(--ax-public-input-root-icon-color);
 
-    color: var(--ax-public-input-root-color);
+    &[data-state='default']:not([data-disabled]):not(:focus-within):hover {
+      border-color: var(--ax-public-input-root-border-color-hover);
+    }
 
-    border: var(--ax-public-input-root-border-size) solid var(--ax-public-input-root-border-color);
+    &[data-state='critical']:not([data-disabled]) {
+      background-color: var(--ax-public-input-root-background-color-critical);
+      border-color: var(--ax-public-input-root-border-color-critical);
+    }
 
-    &:not(:hover) {
-      transition: all var(--ax-public-transition);
+    &[data-state='success']:not([data-disabled]) {
+      background-color: var(--ax-public-input-root-background-color-success);
+      border-color: var(--ax-public-input-root-border-color-success);
+    }
+
+    &[data-state='read-only']:not([data-disabled]),
+    &[data-disabled] {
+      background-color: var(--ax-public-input-root-background-color-disabled);
+      border-color: var(--ax-public-input-root-border-color);
+    }
+
+    &[data-disabled] {
+      color: var(--ax-public-input-root-color-disabled);
+      cursor: not-allowed;
     }
 
-    &:has(input:focus-visible) {
+    &:not([data-disabled]):focus-within {
       border-color: var(--ax-public-input-root-border-color-focus);
     }
+  }
+
+  .icon,
+  .clear {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+  }
 
-    &:global(.base--error) {
-      background-color: var(--ax-public-input-root-background-color-error);
-      border-color: var(--ax-public-input-root-border-color-error);
-      color: var(--ax-public-input-root-color-error);
+  .icon svg,
+  .clear svg {
+    width: var(--wb-size-200);
+    height: var(--wb-size-200);
+  }
+
+  .clear {
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      color: var(--ax-public-input-color);
     }
 
-    &:global(.base--disabled) {
-      color: var(--ax-public-input-root-color-disabled);
+    &:focus-visible {
+      border-radius: var(--wb-radius-25);
+      outline: var(--wb-size-12) solid var(--wb-ui-focus-ring);
+      outline-offset: var(--wb-size-25);
     }
 
-    svg {
-      width: 1rem;
-      height: 1rem;
-      min-width: 1rem;
+    &:disabled {
+      cursor: not-allowed;
     }
   }
 }
diff --git a/packages/ui/src/components/input/input.module.css b/packages/ui/src/components/input/input.module.css
index 32ba45b29..9f2977407 100644
--- a/packages/ui/src/components/input/input.module.css
+++ b/packages/ui/src/components/input/input.module.css
@@ -1,10 +1,12 @@
 @layer ui.component {
   .input {
+    min-width: 0;
+    width: 100%;
+    flex: 1;
     border: none;
     background: transparent;
     padding: 0;
-    color: unset;
-    width: 100%;
+    color: var(--ax-public-input-color);
 
     white-space: nowrap;
     overflow: hidden;
@@ -16,11 +18,12 @@
 
     &:disabled {
       color: var(--ax-public-input-color-disabled);
+      cursor: not-allowed;
     }
 
     &::placeholder {
-      color: unset;
-      opacity: 0.5;
+      color: var(--ax-public-input-placeholder-color);
+      opacity: 1;
     }
   }
 }
diff --git a/packages/ui/src/components/input/input.tsx b/packages/ui/src/components/input/input.tsx
index be57699ce..4cfe9a52e 100644
--- a/packages/ui/src/components/input/input.tsx
+++ b/packages/ui/src/components/input/input.tsx
@@ -1,43 +1,94 @@
 import { Input as InputBase } from '@base-ui/react/input';
+import { X } from '@phosphor-icons/react';
+import { Field } from '@ui/shared/components/field/field';
 import clsx from 'clsx';
+import { forwardRef } from 'react';
 
 import inputRootStyles from './input-root.module.css';
 import inputStyles from './input.module.css';
 import './variables.css';
+import inputHeightStyles from '@ui/shared/styles/field-control-height.module.css';
+import inputSizeStyles from '@ui/shared/styles/field-control-size.module.css';
 import inputFontStyles from '@ui/shared/styles/input-font-size.module.css';
-import inputSizeStyles from '@ui/shared/styles/input-size.module.css';
 
 import type { InputProps } from './types';
 
-export function Input({
-  size = 'medium',
-  startAdornment,
-  endAdornment,
-  error = false,
-  className,
-  ...props
-}: InputProps) {
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    size = 'm',
+    state = 'default',
+    prefixIcon,
+    suffixIcon,
+    onClear,
+    clearLabel = 'Clear input',
+    label,
+    helperText,
+    isRequired,
+    className,
+    disabled,
+    readOnly,
+    id,
+    required,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    ...props
+  },
+  ref,
+) {
+  const isReadOnly = !disabled && (state === 'read-only' || readOnly === true);
+  const fieldState = disabled && state === 'read-only' ? 'default' : isReadOnly ? 'read-only' : state;
+  const isNativeRequired = required || isRequired;
+
   return (
-    <div
-      className={clsx(
-        inputRootStyles['input-root'],
-        inputSizeStyles[size],
-        {
-          'base--error': error,
-          'base--disabled': props.disabled,
-        },
-        className,
-      )}
-      // Padding lives on the wrapper, so clicks there miss the field - forward them.
-      onPointerDown={(event) => {
-        if (event.target !== event.currentTarget) return;
-        event.preventDefault();
-        event.currentTarget.querySelector('input')?.focus();
-      }}
+    <Field
+      id={id}
+      label={label}
+      helperText={helperText}
+      isRequired={isNativeRequired}
+      state={fieldState}
+      disabled={disabled}
+      ariaDescribedBy={ariaDescribedBy}
     >
-      {startAdornment}
-      <InputBase {...props} className={clsx(inputStyles['input'], inputFontStyles[size])} />
-      {endAdornment}
-    </div>
+      {({ controlId, describedBy }) => (
+        <div
+          className={clsx(inputRootStyles['input-root'], inputHeightStyles[size], inputSizeStyles[size], className)}
+          data-state={fieldState}
+          data-disabled={disabled || undefined}
+          onPointerDown={(event) => {
+            if (!(event.target instanceof Element)) return;
+            const interactiveTarget = event.target.closest('button, a, input, select, textarea, [tabindex]');
+            if (interactiveTarget && event.currentTarget.contains(interactiveTarget)) return;
+            event.preventDefault();
+            event.currentTarget.querySelector('input')?.focus();
+          }}
+        >
+          {prefixIcon && <span className={inputRootStyles['icon']}>{prefixIcon}</span>}
+          <InputBase
+            {...props}
+            ref={ref}
+            id={controlId}
+            disabled={disabled}
+            readOnly={isReadOnly}
+            required={isNativeRequired}
+            aria-describedby={describedBy}
+            aria-invalid={fieldState === 'critical' ? true : ariaInvalid}
+            className={clsx(inputStyles['input'], inputFontStyles[size])}
+          />
+          {suffixIcon && <span className={inputRootStyles['icon']}>{suffixIcon}</span>}
+          {onClear && (
+            <button
+              type="button"
+              className={inputRootStyles['clear']}
+              aria-label={clearLabel}
+              disabled={disabled || isReadOnly}
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={onClear}
+            >
+              <X />
+            </button>
+          )}
+        </div>
+      )}
+    </Field>
   );
-}
+});
diff --git a/packages/ui/src/components/input/types.ts b/packages/ui/src/components/input/types.ts
index 03520df37..381d4e272 100644
--- a/packages/ui/src/components/input/types.ts
+++ b/packages/ui/src/components/input/types.ts
@@ -1,27 +1,4 @@
-import type { ItemSize } from '@ui/shared/types/item-size';
-import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { FieldControlProps } from '@ui/shared/types/field';
+import type { InputHTMLAttributes } from 'react';
 
-export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
-  /**
-   * Specifies the size of the input field.
-   * Can be 'small', 'medium', or 'large'.
-   * @default 'medium'
-   */
-  size?: ItemSize;
-
-  /**
-   * Element displayed at the end of the input field.
-   */
-  endAdornment?: ReactNode;
-
-  /**
-   * Element displayed at the start of the input field.
-   */
-  startAdornment?: ReactNode;
-
-  /**
-   * Renders the input in an error state.
-   * @default false
-   */
-  error?: boolean;
-};
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & FieldControlProps;
diff --git a/packages/ui/src/components/input/variables.css b/packages/ui/src/components/input/variables.css
index d93c6d8fe..cf6f4b04a 100644
--- a/packages/ui/src/components/input/variables.css
+++ b/packages/ui/src/components/input/variables.css
@@ -1,14 +1,20 @@
 :root {
+  --ax-public-input-color: var(--wb-ui-text-default);
   --ax-public-input-color-disabled: var(--wb-ui-text-ghost-default);
+  --ax-public-input-placeholder-color: var(--wb-ui-text-ghost-default);
 
-  --ax-public-input-root-color: var(--wb-ui-text-subtle-default);
+  --ax-public-input-root-background-color: var(--wb-ui-bg-base);
+  --ax-public-input-root-background-color-disabled: var(--wb-ui-bg-fill-disabled);
+  --ax-public-input-root-background-color-critical: var(--wb-components-text-field-bg-primary-critical);
+  --ax-public-input-root-background-color-success: var(--wb-components-text-field-bg-primary-success);
   --ax-public-input-root-border-color: var(--wb-components-text-field-stroke-default);
+  --ax-public-input-root-border-color-hover: var(--wb-ui-stroke-default);
   --ax-public-input-root-border-color-focus: var(--wb-components-text-field-stroke-focus);
-  --ax-public-input-root-border-size: 0.0625rem;
-
-  --ax-public-input-root-background-color-error: var(--wb-components-text-field-bg-primary-critical);
-  --ax-public-input-root-border-color-error: var(--wb-components-text-field-stroke-critical);
-  --ax-public-input-root-color-error: var(--wb-ui-text-critical-default);
-
+  --ax-public-input-root-border-color-critical: var(--wb-components-text-field-stroke-critical);
+  --ax-public-input-root-border-color-success: var(--wb-components-text-field-stroke-success);
+  --ax-public-input-root-border-size: var(--wb-size-12);
+  --ax-public-input-root-icon-color: var(--wb-ui-text-subtle-default);
   --ax-public-input-root-color-disabled: var(--wb-ui-text-ghost-default);
+  --ax-public-input-root-color: var(--wb-ui-text-subtle-default);
+  --ax-public-input-root-color-critical: var(--wb-ui-text-default);
 }
diff --git a/packages/ui/src/components/text-area/index.ts b/packages/ui/src/components/text-area/index.ts
index e18b3258a..c1332d7c1 100644
--- a/packages/ui/src/components/text-area/index.ts
+++ b/packages/ui/src/components/text-area/index.ts
@@ -1 +1,2 @@
 export * from './text-area';
+export { FIELD_STATES, type FieldState } from '@ui/shared/types/field';
diff --git a/packages/ui/src/components/text-area/text-area.module.css b/packages/ui/src/components/text-area/text-area.module.css
index f36042be3..a1aedeebd 100644
--- a/packages/ui/src/components/text-area/text-area.module.css
+++ b/packages/ui/src/components/text-area/text-area.module.css
@@ -1,56 +1,82 @@
 :root {
+  --ax-public-textarea-color: var(--wb-ui-text-default);
   --ax-public-textarea-color-disabled: var(--wb-ui-text-ghost-default);
-  --ax-public-textarea-root-color: var(--wb-ui-text-subtle-default);
+  --ax-public-textarea-placeholder-color: var(--wb-ui-text-ghost-default);
+  --ax-public-textarea-root-background-color: var(--wb-ui-bg-base);
+  --ax-public-textarea-root-background-color-disabled: var(--wb-ui-bg-fill-disabled);
+  --ax-public-textarea-root-background-color-critical: var(--wb-components-text-field-bg-primary-critical);
+  --ax-public-textarea-root-background-color-success: var(--wb-components-text-field-bg-primary-success);
   --ax-public-textarea-root-border-color: var(--wb-components-text-field-stroke-default);
+  --ax-public-textarea-root-border-color-hover: var(--wb-ui-stroke-default);
   --ax-public-textarea-root-border-color-focus: var(--wb-components-text-field-stroke-focus);
-  --ax-public-textarea-root-border-size: 0.0625rem;
-  --ax-public-textarea-root-background-color-error: var(--wb-components-text-field-bg-primary-critical);
-  --ax-public-textarea-root-border-color-error: var(--wb-components-text-field-stroke-critical);
-  --ax-public-textarea-root-color-error: var(--wb-ui-text-critical-default);
+  --ax-public-textarea-root-border-color-critical: var(--wb-components-text-field-stroke-critical);
+  --ax-public-textarea-root-border-color-success: var(--wb-components-text-field-stroke-success);
+  --ax-public-textarea-root-border-size: var(--wb-size-12);
+  --ax-public-textarea-root-icon-color: var(--wb-ui-text-subtle-default);
   --ax-public-textarea-root-color-disabled: var(--wb-ui-text-ghost-default);
-  --ax-public-textarea-root-background-color-disabled: transparent;
 }
 
 @layer ui.component {
   .text-area-container {
     display: flex;
-    min-width: 100px;
+    min-width: 0;
+    width: 100%;
     align-items: flex-start;
-    gap: 0.5rem;
-    background-color: transparent;
-    color: var(--ax-public-textarea-root-color);
+    background-color: var(--ax-public-textarea-root-background-color);
+    color: var(--ax-public-textarea-root-icon-color);
     border: var(--ax-public-textarea-root-border-size) solid var(--ax-public-textarea-root-border-color);
 
-    &:not(:hover) {
-      transition: all var(--ax-public-transition);
+    &[data-state='default']:not([data-disabled]):not(:focus-within):hover {
+      border-color: var(--ax-public-textarea-root-border-color-hover);
     }
 
-    &:has(.text-area:focus-visible) {
-      border-color: var(--ax-public-textarea-root-border-color-focus);
+    &[data-state='critical']:not([data-disabled]) {
+      background-color: var(--ax-public-textarea-root-background-color-critical);
+      border-color: var(--ax-public-textarea-root-border-color-critical);
     }
 
-    &:global(.base--error) {
-      background-color: var(--ax-public-textarea-root-background-color-error);
-      border-color: var(--ax-public-textarea-root-border-color-error);
-      color: var(--ax-public-textarea-root-color-error);
+    &[data-state='success']:not([data-disabled]) {
+      background-color: var(--ax-public-textarea-root-background-color-success);
+      border-color: var(--ax-public-textarea-root-border-color-success);
     }
 
-    &:global(.base--disabled) {
-      color: var(--ax-public-textarea-root-color-disabled);
+    &[data-state='read-only']:not([data-disabled]),
+    &[data-disabled] {
       background-color: var(--ax-public-textarea-root-background-color-disabled);
+      border-color: var(--ax-public-textarea-root-border-color);
+    }
+
+    &[data-disabled] {
+      color: var(--ax-public-textarea-root-color-disabled);
       cursor: not-allowed;
     }
+
+    &:not([data-disabled]):focus-within {
+      border-color: var(--ax-public-textarea-root-border-color-focus);
+    }
+  }
+
+  .size-l {
+    min-height: calc(var(--wb-size-800) + var(--wb-size-700));
+  }
+
+  .size-m {
+    min-height: calc(var(--wb-size-1000) + var(--wb-space-250));
+  }
+
+  .size-s {
+    min-height: var(--wb-size-1000);
   }
 
   .text-area {
+    min-width: 0;
+    flex: 1;
     border: none;
     background: transparent;
     padding: 0;
-    color: unset;
+    color: var(--ax-public-textarea-color);
     width: 100%;
     resize: none;
-    /* Not the `font` shorthand - it would also set the size, overriding the
-       ax-public-* typography class the component is given. */
     font-family: inherit;
 
     &:focus-visible {
@@ -61,5 +87,46 @@
       color: var(--ax-public-textarea-color-disabled);
       cursor: not-allowed;
     }
+
+    &::placeholder {
+      color: var(--ax-public-textarea-placeholder-color);
+      opacity: 1;
+    }
+  }
+
+  .icon,
+  .clear {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon svg,
+  .clear svg {
+    width: var(--wb-size-200);
+    height: var(--wb-size-200);
+  }
+
+  .clear {
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      color: var(--ax-public-textarea-color);
+    }
+
+    &:focus-visible {
+      border-radius: var(--wb-radius-25);
+      outline: var(--wb-size-12) solid var(--wb-ui-focus-ring);
+      outline-offset: var(--wb-size-25);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 }
diff --git a/packages/ui/src/components/text-area/text-area.tsx b/packages/ui/src/components/text-area/text-area.tsx
index 93c4f14d0..d02fd2054 100644
--- a/packages/ui/src/components/text-area/text-area.tsx
+++ b/packages/ui/src/components/text-area/text-area.tsx
@@ -1,125 +1,102 @@
+import { X } from '@phosphor-icons/react';
+import { Field } from '@ui/shared/components/field/field';
+import type { FieldControlProps, FieldSize } from '@ui/shared/types/field';
 import clsx from 'clsx';
-import type React from 'react';
+import { type ComponentPropsWithoutRef, type TextareaHTMLAttributes, forwardRef } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 
 import styles from './text-area.module.css';
+import inputSizeStyles from '@ui/shared/styles/field-control-size.module.css';
 import inputFontStyles from '@ui/shared/styles/input-font-size.module.css';
-import inputSizeStyles from '@ui/shared/styles/input-size.module.css';
-
-import type { ItemSize } from '../../shared/types/item-size';
 
 export type TextAreaProps = {
-  /**
-   * Controlled value of the textarea
-   */
-  value?: string;
-  /**
-   * Initial value of the textarea
-   */
-  defaultValue?: string;
-  /**
-   * Placeholder text for the textarea
-   */
-  placeholder?: string;
-  /**
-   * Size of the textarea
-   * @default 'medium'
-   */
-  size?: ItemSize;
-  /**
-   * Maximum number of rows the textarea can expand to
-   */
   maxRows?: number;
-  /**
-   * Minimum number of rows the textarea can expand to
-   */
   minRows?: number;
-  /**
-   * Whether the textarea is disabled
-   */
-  disabled?: boolean;
-  /**
-   * Whether the textarea has an error
-   */
-  error?: boolean;
-  /**
-   * Callback function to handle change in textarea value
-   */
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  /**
-   * Callback function to handle click
-   */
-  onClick?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
-  /**
-   * Function called when the input loses focus.
-   * The event parameter may be undefined.
-   */
-  onBlur?: (event?: React.FocusEvent) => void;
-  /**
-   * Custom class name for the textarea
-   */
-  className?: string;
-  /**
-   * Enables or disables browser spell checking
-   */
-  spellCheck?: boolean;
-};
+  size?: Exclude<FieldSize, 'xs'>;
+  style?: ComponentPropsWithoutRef<typeof TextareaAutosize>['style'];
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style'> &
+  FieldControlProps;
 
-/**
- * Component for displaying a textarea with customizable size, rows, and error state
- */
-export function TextArea({
-  value,
-  defaultValue,
-  placeholder,
-  size = 'medium',
-  maxRows,
-  minRows,
-  disabled,
-  error,
-  onChange,
-  onClick,
-  onBlur,
-  className,
-  spellCheck,
-  ...props
-}: TextAreaProps) {
-  const containerClasses = clsx(
-    styles['text-area-container'],
-    inputSizeStyles[size],
-    {
-      'base--error': error,
-      'base--disabled': disabled,
-    },
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
+  {
+    size = 'm',
+    state = 'default',
+    prefixIcon,
+    suffixIcon,
+    onClear,
+    clearLabel = 'Clear text area',
+    label,
+    helperText,
+    isRequired,
+    maxRows,
+    minRows,
+    disabled,
+    readOnly,
     className,
-  );
-
-  const textareaClasses = clsx(styles['text-area'], inputFontStyles[size]);
+    id,
+    required,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    ...props
+  },
+  ref,
+) {
+  const isReadOnly = !disabled && (state === 'read-only' || readOnly === true);
+  const fieldState = disabled && state === 'read-only' ? 'default' : isReadOnly ? 'read-only' : state;
+  const isNativeRequired = required || isRequired;
 
   return (
-    <div
-      className={containerClasses}
-      // Padding lives on the wrapper, so clicks there miss the field - forward them.
-      onPointerDown={(event) => {
-        if (event.target !== event.currentTarget) return;
-        event.preventDefault();
-        event.currentTarget.querySelector('textarea')?.focus();
-      }}
+    <Field
+      id={id}
+      label={label}
+      helperText={helperText}
+      isRequired={isNativeRequired}
+      state={fieldState}
+      disabled={disabled}
+      ariaDescribedBy={ariaDescribedBy}
     >
-      <TextareaAutosize
-        value={value || ''}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        minRows={minRows}
-        maxRows={maxRows}
-        disabled={disabled}
-        onChange={onChange}
-        onClick={onClick}
-        onBlur={onBlur}
-        className={textareaClasses}
-        spellCheck={spellCheck}
-        {...props}
-      />
-    </div>
+      {({ controlId, describedBy }) => (
+        <div
+          className={clsx(styles['text-area-container'], styles[`size-${size}`], inputSizeStyles[size], className)}
+          data-state={fieldState}
+          data-disabled={disabled || undefined}
+          onPointerDown={(event) => {
+            if (!(event.target instanceof Element)) return;
+            const interactiveTarget = event.target.closest('button, a, input, select, textarea, [tabindex]');
+            if (interactiveTarget && event.currentTarget.contains(interactiveTarget)) return;
+            event.preventDefault();
+            event.currentTarget.querySelector('textarea')?.focus();
+          }}
+        >
+          {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>}
+          <TextareaAutosize
+            {...props}
+            ref={ref}
+            id={controlId}
+            minRows={minRows}
+            maxRows={maxRows}
+            disabled={disabled}
+            readOnly={isReadOnly}
+            required={isNativeRequired}
+            aria-describedby={describedBy}
+            aria-invalid={fieldState === 'critical' ? true : ariaInvalid}
+            className={clsx(styles['text-area'], inputFontStyles[size])}
+          />
+          {suffixIcon && <span className={styles['icon']}>{suffixIcon}</span>}
+          {onClear && (
+            <button
+              type="button"
+              className={styles['clear']}
+              aria-label={clearLabel}
+              disabled={disabled || isReadOnly}
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={onClear}
+            >
+              <X />
+            </button>
+          )}
+        </div>
+      )}
+    </Field>
   );
-}
+});
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 87221e9c5..83cce0c93 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -29,3 +29,4 @@ export * from './components/tooltip';
 export * from './shared/types/size';
 export * from './shared/types/item-size';
 export * from './shared/types/with-icon';
+export * from './shared/types/field';
diff --git a/packages/ui/src/shared/components/field/field.module.css b/packages/ui/src/shared/components/field/field.module.css
new file mode 100644
index 000000000..a98b94b35
--- /dev/null
+++ b/packages/ui/src/shared/components/field/field.module.css
@@ -0,0 +1,50 @@
+:root {
+  --ax-public-field-gap: var(--wb-space-75);
+  --ax-public-field-row-min-height: var(--wb-size-200);
+  --ax-public-field-font-size: var(--wb-font-size-150);
+  --ax-public-field-font-weight: 400;
+  --ax-public-field-line-height: var(--wb-size-200);
+  --ax-public-field-label-color: var(--wb-ui-text-default);
+  --ax-public-field-helper-color: var(--wb-ui-text-subtle-default);
+  --ax-public-field-critical-color: var(--wb-components-text-field-stroke-critical);
+  --ax-public-field-color-disabled: var(--wb-ui-text-ghost-default);
+}
+
+@layer ui.component {
+  .field {
+    display: flex;
+    min-width: 0;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--ax-public-field-gap);
+  }
+
+  .label,
+  .helper {
+    display: flex;
+    min-height: var(--ax-public-field-row-min-height);
+    font-size: var(--ax-public-field-font-size);
+    font-weight: var(--ax-public-field-font-weight);
+    line-height: var(--ax-public-field-line-height);
+  }
+
+  .label {
+    color: var(--ax-public-field-label-color);
+  }
+
+  .required {
+    color: var(--ax-public-field-critical-color);
+  }
+
+  .helper {
+    color: var(--ax-public-field-helper-color);
+  }
+
+  .field[data-state='critical']:not([data-disabled]) .helper {
+    color: var(--ax-public-field-critical-color);
+  }
+
+  .field[data-disabled] :is(.label, .helper, .required) {
+    color: var(--ax-public-field-color-disabled);
+  }
+}
diff --git a/packages/ui/src/shared/components/field/field.spec.tsx b/packages/ui/src/shared/components/field/field.spec.tsx
new file mode 100644
index 000000000..824aea9d4
--- /dev/null
+++ b/packages/ui/src/shared/components/field/field.spec.tsx
@@ -0,0 +1,82 @@
+import { type ReactElement, act } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { Input } from '../../../components/input/input';
+import { TextArea } from '../../../components/text-area/text-area';
+import { Field } from './field';
+
+declare global {
+  // eslint-disable-next-line no-var
+  var IS_REACT_ACT_ENVIRONMENT: boolean;
+}
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('Field', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  function renderField(label?: ReactElement | string | boolean, helperText?: ReactElement | string | boolean) {
+    act(() => {
+      root.render(
+        <Field label={label} helperText={helperText} state="default">
+          {({ controlId, describedBy }) => <input id={controlId} aria-describedby={describedBy} />}
+        </Field>,
+      );
+    });
+  }
+
+  it('preserves the control when composition content changes', () => {
+    renderField();
+    const input = container.querySelector('input')!;
+    input.focus();
+
+    renderField('Label', 'Helper');
+
+    expect(container.querySelector('input')).toBe(input);
+    expect(document.activeElement).toBe(input);
+    expect(container.querySelector('label')?.htmlFor).toBe(input.id);
+  });
+
+  it('does not render or reference boolean label and helper values', () => {
+    renderField(true, false);
+    const input = container.querySelector('input')!;
+
+    expect(container.querySelector('label')).toBeNull();
+    expect(container.querySelector('span')).toBeNull();
+    expect(input.getAttribute('aria-describedby')).toBeNull();
+  });
+});
+
+describe.each([
+  ['Input', <Input key="input" />, 'input'],
+  ['TextArea', <TextArea key="text-area" />, 'textarea'],
+] as const)('%s pointer guard', (_name, control, selector) => {
+  it('ignores interactive ancestors outside the field control', () => {
+    const host = document.createElement('div');
+    host.tabIndex = 0;
+    document.body.append(host);
+    const root = createRoot(host);
+
+    act(() => root.render(control));
+    const nativeControl = host.querySelector(selector)! as HTMLInputElement | HTMLTextAreaElement;
+    const controlRoot = nativeControl.parentElement!;
+
+    act(() => controlRoot.dispatchEvent(new Event('pointerdown', { bubbles: true })));
+
+    expect(document.activeElement).toBe(nativeControl);
+
+    act(() => root.unmount());
+    host.remove();
+  });
+});
diff --git a/packages/ui/src/shared/components/field/field.tsx b/packages/ui/src/shared/components/field/field.tsx
new file mode 100644
index 000000000..2032cbaa6
--- /dev/null
+++ b/packages/ui/src/shared/components/field/field.tsx
@@ -0,0 +1,52 @@
+import { type ReactNode, useId } from 'react';
+
+import styles from './field.module.css';
+
+import type { FieldState } from '../../types/field';
+
+type FieldRenderProps = {
+  controlId: string | undefined;
+  describedBy: string | undefined;
+};
+
+type FieldProps = {
+  ariaDescribedBy?: string;
+  children: (props: FieldRenderProps) => ReactNode;
+  disabled?: boolean;
+  helperText?: ReactNode;
+  id?: string;
+  isRequired?: boolean;
+  label?: ReactNode;
+  state: FieldState;
+};
+
+export function Field({ ariaDescribedBy, children, disabled, helperText, id, isRequired, label, state }: FieldProps) {
+  const generatedId = useId();
+  const hasLabel = label !== undefined && label !== null && typeof label !== 'boolean';
+  const hasHelper = helperText !== undefined && helperText !== null && typeof helperText !== 'boolean';
+  const controlId = id ?? generatedId;
+  const helperId = hasHelper ? `${controlId}-helper` : undefined;
+  const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;
+  const control = children({ controlId, describedBy });
+
+  return (
+    <div className={styles['field']} data-state={state} data-disabled={disabled || undefined}>
+      {hasLabel && (
+        <label className={styles['label']} htmlFor={controlId}>
+          {label}
+          {isRequired && (
+            <span className={styles['required']} aria-hidden="true">
+              *
+            </span>
+          )}
+        </label>
+      )}
+      {control}
+      {hasHelper && (
+        <span className={styles['helper']} id={helperId} role={state === 'critical' ? 'alert' : undefined}>
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/shared/styles/field-control-height.module.css b/packages/ui/src/shared/styles/field-control-height.module.css
new file mode 100644
index 000000000..addb56ab5
--- /dev/null
+++ b/packages/ui/src/shared/styles/field-control-height.module.css
@@ -0,0 +1,24 @@
+:root {
+  --ax-public-input-height-l: calc(var(--wb-size-500) + var(--wb-size-25));
+  --ax-public-input-height-m: calc(var(--wb-size-400) + var(--wb-size-50));
+  --ax-public-input-height-s: var(--wb-size-400);
+  --ax-public-input-height-xs: calc(var(--wb-size-300) + var(--wb-size-50));
+}
+
+@layer ui.component {
+  .l {
+    min-height: var(--ax-public-input-height-l);
+  }
+
+  .m {
+    min-height: var(--ax-public-input-height-m);
+  }
+
+  .s {
+    min-height: var(--ax-public-input-height-s);
+  }
+
+  .xs {
+    min-height: var(--ax-public-input-height-xs);
+  }
+}
diff --git a/packages/ui/src/shared/styles/field-control-size.module.css b/packages/ui/src/shared/styles/field-control-size.module.css
new file mode 100644
index 000000000..013d566a2
--- /dev/null
+++ b/packages/ui/src/shared/styles/field-control-size.module.css
@@ -0,0 +1,42 @@
+:root {
+  --ax-public-input-padding-l: var(--wb-space-137) var(--wb-space-150);
+  --ax-public-input-padding-m: var(--wb-space-125) var(--wb-space-150);
+  --ax-public-input-padding-s: var(--wb-space-100) var(--wb-space-150);
+  --ax-public-input-padding-xs: var(--wb-space-75) var(--wb-space-150);
+
+  --ax-public-input-border-radius-l: var(--wb-radius-100);
+  --ax-public-input-border-radius-m: var(--wb-radius-75);
+  --ax-public-input-border-radius-s: var(--wb-radius-75);
+  --ax-public-input-border-radius-xs: var(--wb-radius-75);
+
+  --ax-public-input-gap-l: var(--wb-space-100);
+  --ax-public-input-gap-m: var(--wb-space-100);
+  --ax-public-input-gap-s: var(--wb-space-100);
+  --ax-public-input-gap-xs: var(--wb-space-100);
+}
+
+@layer ui.component {
+  .l {
+    padding: var(--ax-public-input-padding-l);
+    border-radius: var(--ax-public-input-border-radius-l);
+    gap: var(--ax-public-input-gap-l);
+  }
+
+  .m {
+    padding: var(--ax-public-input-padding-m);
+    border-radius: var(--ax-public-input-border-radius-m);
+    gap: var(--ax-public-input-gap-m);
+  }
+
+  .s {
+    padding: var(--ax-public-input-padding-s);
+    border-radius: var(--ax-public-input-border-radius-s);
+    gap: var(--ax-public-input-gap-s);
+  }
+
+  .xs {
+    padding: var(--ax-public-input-padding-xs);
+    border-radius: var(--ax-public-input-border-radius-xs);
+    gap: var(--ax-public-input-gap-xs);
+  }
+}
diff --git a/packages/ui/src/shared/styles/input-font-size.module.css b/packages/ui/src/shared/styles/input-font-size.module.css
index 93cb8746e..341811578 100644
--- a/packages/ui/src/shared/styles/input-font-size.module.css
+++ b/packages/ui/src/shared/styles/input-font-size.module.css
@@ -1,4 +1,14 @@
 @layer ui.component {
+  .l {
+    composes: wb-text-label-l from global;
+  }
+
+  .m,
+  .s,
+  .xs {
+    composes: wb-text-label-m from global;
+  }
+
   .large {
     composes: ax-public-p9 from global;
   }
diff --git a/packages/ui/src/shared/types/field.ts b/packages/ui/src/shared/types/field.ts
new file mode 100644
index 000000000..428a61d17
--- /dev/null
+++ b/packages/ui/src/shared/types/field.ts
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+
+export const FIELD_STATES = ['default', 'critical', 'success', 'read-only'] as const;
+export const FIELD_SIZES = ['l', 'm', 's', 'xs'] as const;
+
+export type FieldState = (typeof FIELD_STATES)[number];
+export type FieldSize = (typeof FIELD_SIZES)[number];
+
+export type FieldControlProps = {
+  /**
+   * Disabled controls take precedence over the read-only state.
+   * @default 'default'
+   */
+  state?: FieldState;
+  /**
+   * @default 'm'
+   */
+  size?: FieldSize;
+  prefixIcon?: ReactNode;
+  suffixIcon?: ReactNode;
+  /** Renders a clear affordance that invokes this callback. */
+  onClear?: () => void;
+  /** Accessible name for the clear affordance rendered when `onClear` is provided. */
+  clearLabel?: string;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  isRequired?: boolean;
+};