From b65123e15fa80f319f1de83b5cfa4af45fdde91d Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Fri, 21 Aug 2026 10:59:40 +0200
Subject: [PATCH 1/4] feat(ui)!: rebuild the form fields and add NumberField

Fields take an explicit state - default, critical, success or
read-only - in place of the error boolean, and sizes are letter-scaled.
Hover, focus and filled stay visual states rather than props. Read-only
keeps the field focusable and copyable through the native attribute,
while disabled stays out of the tab order.

Icons arrive as prefix and suffix slots with an optional clear
affordance. Heights, padding, gap, radius and the label roles come from
the design component set, and every surface, border and text colour
binds to its field token.

NumberField is new: an input with an always-visible stepper that
honours min, max and step from both the buttons and the arrow keys.
---
 .changeset/form-fields-redesign.md            |   6 +
 apps/docs/scripts/ui-components.mjs           |   1 +
 .../docs/src/components/ui-examples/input.tsx |  27 ++-
 .../components/ui-examples/number-field.tsx   |  14 ++
 .../src/components/ui-examples/text-area.tsx  |  18 +-
 .../docs/ui-library/ui-components/index.mdx   |   3 +-
 .../docs/ui-library/ui-components/input.mdx   |  19 +-
 .../ui-library/ui-components/number-field.mdx |  35 ++++
 .../ui-library/ui-components/text-area.mdx    |  14 +-
 .../text-area-control/text-area-control.tsx   |   2 +-
 .../controls/text-control/text-control.tsx    |   2 +-
 .../dynamic-typed-input.tsx                   |  15 +-
 .../variable-form/variable-form.tsx           |   6 +-
 packages/ui/src/components/input/index.ts     |   1 +
 .../components/input/input-root.module.css    |  74 ++++++--
 .../ui/src/components/input/input.module.css  |  11 +-
 packages/ui/src/components/input/input.tsx    |  56 +++---
 packages/ui/src/components/input/types.ts     |  29 +--
 .../ui/src/components/input/variables.css     |  18 +-
 .../ui/src/components/number-field/index.ts   |   3 +
 .../number-field/number-field.module.css      | 170 ++++++++++++++++++
 .../number-field/number-field.spec.tsx        |  85 +++++++++
 .../components/number-field/number-field.tsx  |  96 ++++++++++
 .../ui/src/components/number-field/types.ts   |  18 ++
 .../src/components/number-field/variables.css |  21 +++
 packages/ui/src/components/text-area/index.ts |   1 +
 .../components/text-area/text-area.module.css | 120 ++++++++++---
 .../ui/src/components/text-area/text-area.tsx | 148 +++++----------
 packages/ui/src/index.ts                      |   2 +
 .../shared/styles/input-font-size.module.css  |  10 ++
 .../src/shared/styles/input-size.module.css   |  48 +++++
 packages/ui/src/shared/types/field.ts         |  23 +++
 packages/ui/vite.config.mts                   |   1 +
 33 files changed, 881 insertions(+), 216 deletions(-)
 create mode 100644 .changeset/form-fields-redesign.md
 create mode 100644 apps/docs/src/components/ui-examples/number-field.tsx
 create mode 100644 apps/docs/src/content/docs/ui-library/ui-components/number-field.mdx
 create mode 100644 packages/ui/src/components/number-field/index.ts
 create mode 100644 packages/ui/src/components/number-field/number-field.module.css
 create mode 100644 packages/ui/src/components/number-field/number-field.spec.tsx
 create mode 100644 packages/ui/src/components/number-field/number-field.tsx
 create mode 100644 packages/ui/src/components/number-field/types.ts
 create mode 100644 packages/ui/src/components/number-field/variables.css
 create mode 100644 packages/ui/src/shared/types/field.ts

diff --git a/.changeset/form-fields-redesign.md b/.changeset/form-fields-redesign.md
new file mode 100644
index 000000000..ce765e23e
--- /dev/null
+++ b/.changeset/form-fields-redesign.md
@@ -0,0 +1,6 @@
+---
+'@workflowbuilder/ui': major
+'@workflowbuilder/sdk': minor
+---
+
+Input and TextArea now take a `state` enum instead of `error`, use letter sizes, and support prefix, suffix, and clear icon slots. Read-only fields remain focusable and copyable, and the new NumberField adds bounded keyboard and stepper controls.
diff --git a/apps/docs/scripts/ui-components.mjs b/apps/docs/scripts/ui-components.mjs
index 8abe83075..12f3b050d 100644
--- a/apps/docs/scripts/ui-components.mjs
+++ b/apps/docs/scripts/ui-components.mjs
@@ -21,6 +21,7 @@ export const COMPONENTS = [
   { slug: 'input', name: 'Input', propsType: 'InputProps', dir: 'input' },
   { slug: 'menu', name: 'Menu', propsType: 'MenuProps', dir: 'menu' },
   { slug: 'modal', name: 'Modal', propsType: 'ModalProps', dir: 'modal' },
+  { slug: 'number-field', name: 'NumberField', propsType: 'NumberFieldProps', dir: 'number-field' },
   {
     slug: 'nav-button',
     name: 'NavButton',
diff --git a/apps/docs/src/components/ui-examples/input.tsx b/apps/docs/src/components/ui-examples/input.tsx
index f1d4cc4b2..394871cfa 100644
--- a/apps/docs/src/components/ui-examples/input.tsx
+++ b/apps/docs/src/components/ui-examples/input.tsx
@@ -1,3 +1,4 @@
+import { MagnifyingGlass } from '@phosphor-icons/react';
 import { Input } from '@workflowbuilder/ui';
 import { useState } from 'react';
 
@@ -8,7 +9,31 @@ export function InputExample() {
 
   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"
+          prefixIcon={<MagnifyingGlass />}
+          placeholder="Large input"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          onClear={() => setValue('')}
+        />
+        <Input
+          size="m"
+          state="critical"
+          placeholder="Critical input"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        />
+        <Input
+          size="s"
+          state="success"
+          placeholder="Successful input"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        />
+        <Input size="xs" state="read-only" value={value || 'Read-only value'} />
+      </div>
     </ComponentPreview>
   );
 }
diff --git a/apps/docs/src/components/ui-examples/number-field.tsx b/apps/docs/src/components/ui-examples/number-field.tsx
new file mode 100644
index 000000000..85a780b0e
--- /dev/null
+++ b/apps/docs/src/components/ui-examples/number-field.tsx
@@ -0,0 +1,14 @@
+import { NumberField } from '@workflowbuilder/ui';
+import { useState } from 'react';
+
+import { ComponentPreview } from './component-preview';
+
+export function NumberFieldExample() {
+  const [value, setValue] = useState(3);
+
+  return (
+    <ComponentPreview>
+      <NumberField aria-label="Quantity" value={value} min={0} max={10} step={1} onValueChange={setValue} />
+    </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..3425ac537 100644
--- a/apps/docs/src/components/ui-examples/text-area.tsx
+++ b/apps/docs/src/components/ui-examples/text-area.tsx
@@ -8,7 +8,23 @@ export function TextAreaExample() {
 
   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"
+          placeholder="Large text area"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          onClear={() => setValue('')}
+        />
+        <TextArea
+          size="m"
+          state="critical"
+          placeholder="Critical text area"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        />
+        <TextArea size="s" state="read-only" value={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..78e8e91cb 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,10 +15,11 @@ 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.
+- [NumberField](/ui-library/ui-components/number-field/) - Numeric input with stepper controls.
 - [Radio](/ui-library/ui-components/radio/) - Radio button for a single choice.
 - [SegmentPicker](/ui-library/ui-components/segment-picker/) - Segmented single-choice control.
 - [Select](/ui-library/ui-components/select/) - Dropdown select.
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..b8cbcffaf 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,18 @@ 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'}
+      placeholder="Type something"
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      onClear={() => setValue('')}
+    />
+  );
 }
 ```
 
diff --git a/apps/docs/src/content/docs/ui-library/ui-components/number-field.mdx b/apps/docs/src/content/docs/ui-library/ui-components/number-field.mdx
new file mode 100644
index 000000000..aad127a12
--- /dev/null
+++ b/apps/docs/src/content/docs/ui-library/ui-components/number-field.mdx
@@ -0,0 +1,35 @@
+---
+title: NumberField
+description: A numeric input with keyboard stepping and always-visible stepper controls.
+---
+
+import CssVariablesTable from '../../../../components/api/css-variables-table.astro';
+import PropsTable from '../../../../components/api/props-table.astro';
+import { NumberFieldExample } from '../../../../components/ui-examples/number-field';
+
+A `NumberField` accepts numeric values and keeps increment and decrement controls
+visible on its trailing edge. Arrow keys and the stepper respect `min`, `max`,
+and `step`.
+
+<NumberFieldExample client:visible />
+
+## Usage
+
+```tsx
+import { NumberField } from '@workflowbuilder/ui';
+import { useState } from 'react';
+
+function Example() {
+  const [value, setValue] = useState(3);
+
+  return <NumberField aria-label="Quantity" value={value} min={0} max={10} onValueChange={setValue} />;
+}
+```
+
+## Props
+
+<PropsTable slug="number-field" />
+
+## CSS variables
+
+<CssVariablesTable slug="number-field" />
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..147176caa 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,15 @@ 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'}
+      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..36c88a8c2 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
@@ -44,6 +44,7 @@ export function DynamicTypedInput({
   const [time, setTime] = useState(getIsDateType(type) ? getTimeFromDateIfValid(value) : undefined);
   const variableTypeInfo = type ? variableTypeInfoByType[type] : undefined;
   const { t } = useTranslation();
+  const errorProps = { error: isError };
 
   const suggestionGroupsForString = useMemo(() => {
     if (!variableTypeInfo || typesForInput.includes(variableTypeInfo.type) === false) {
@@ -88,9 +89,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 +103,13 @@ export function DynamicTypedInput({
     return (
       <div className={styles['container--select']}>
         <Select
+          {...errorProps}
           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 +120,7 @@ export function DynamicTypedInput({
     return (
       <div className={styles['date-with-reset-container']}>
         <DatePicker
+          {...errorProps}
           key={value}
           className={clsx(styles['date-picker'], className)}
           value={getDateIfValid(value)}
@@ -131,7 +131,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 +144,7 @@ export function DynamicTypedInput({
     return (
       <div className={styles['row']}>
         <DatePicker
+          {...errorProps}
           key={value}
           className={clsx(styles['date-picker'], className)}
           value={date}
@@ -159,7 +159,6 @@ export function DynamicTypedInput({
           // valueFormat="DD-MM-YYYY HH:mm"
           // placeholder="DD-MM-YYYY HH:mm"
           disabled={disabled}
-          error={isError}
         />
         <Input
           className={className}
@@ -190,8 +189,8 @@ export function DynamicTypedInput({
             }
           }}
           disabled={disabled || !date}
-          error={isError}
-          endAdornment={endAdornment}
+          state={isError ? 'critical' : 'default'}
+          suffixIcon={endAdornment}
         />
       </div>
     );
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/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..074340ff6 100644
--- a/packages/ui/src/components/input/input-root.module.css
+++ b/packages/ui/src/components/input/input-root.module.css
@@ -3,33 +3,77 @@
     display: flex;
     align-items: center;
     cursor: text;
-
-    color: var(--ax-public-input-root-color);
-
+    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);
 
-    &:not(:hover) {
-      transition: all var(--ax-public-transition);
+    &[data-state='default']:not([data-disabled]):not(:focus-within):hover {
+      border-color: var(--ax-public-input-root-border-color-hover);
     }
 
-    &:has(input:focus-visible) {
+    &[data-state='default']:not([data-disabled]):focus-within {
       border-color: var(--ax-public-input-root-border-color-focus);
     }
 
-    &: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);
+    &[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);
+    }
+
+    &[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);
     }
 
-    &:global(.base--disabled) {
+    &[data-disabled] {
       color: var(--ax-public-input-root-color-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  .icon,
+  .clear {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon {
+    pointer-events: none;
+  }
+
+  .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);
+    }
+
+    &: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..ac269b58b 100644
--- a/packages/ui/src/components/input/input.tsx
+++ b/packages/ui/src/components/input/input.tsx
@@ -1,5 +1,7 @@
 import { Input as InputBase } from '@base-ui/react/input';
+import { X } from '@phosphor-icons/react';
 import clsx from 'clsx';
+import { forwardRef } from 'react';
 
 import inputRootStyles from './input-root.module.css';
 import inputStyles from './input.module.css';
@@ -9,35 +11,45 @@ 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, className, disabled, readOnly, ...props },
+  ref,
+) {
+  const isReadOnly = state === 'read-only' || readOnly === true;
+  const fieldState = isReadOnly ? 'read-only' : state;
+
   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.
+      className={clsx(inputRootStyles['input-root'], inputSizeStyles[size], className)}
+      data-state={fieldState}
+      data-disabled={disabled || undefined}
       onPointerDown={(event) => {
         if (event.target !== event.currentTarget) return;
         event.preventDefault();
         event.currentTarget.querySelector('input')?.focus();
       }}
     >
-      {startAdornment}
-      <InputBase {...props} className={clsx(inputStyles['input'], inputFontStyles[size])} />
-      {endAdornment}
+      {prefixIcon && <span className={inputRootStyles['icon']}>{prefixIcon}</span>}
+      <InputBase
+        {...props}
+        ref={ref}
+        disabled={disabled}
+        readOnly={isReadOnly}
+        className={clsx(inputStyles['input'], inputFontStyles[size])}
+      />
+      {suffixIcon && <span className={inputRootStyles['icon']}>{suffixIcon}</span>}
+      {onClear && (
+        <button
+          type="button"
+          className={inputRootStyles['clear']}
+          aria-label="Clear input"
+          disabled={disabled || isReadOnly}
+          onPointerDown={(event) => event.preventDefault()}
+          onClick={onClear}
+        >
+          <X />
+        </button>
+      )}
     </div>
   );
-}
+});
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..e1ecfdc8e 100644
--- a/packages/ui/src/components/input/variables.css
+++ b/packages/ui/src/components/input/variables.css
@@ -1,14 +1,22 @@
 :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-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-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-color-disabled: var(--wb-ui-text-ghost-default);
 }
diff --git a/packages/ui/src/components/number-field/index.ts b/packages/ui/src/components/number-field/index.ts
new file mode 100644
index 000000000..6f85ee689
--- /dev/null
+++ b/packages/ui/src/components/number-field/index.ts
@@ -0,0 +1,3 @@
+export * from './number-field';
+export * from './types';
+export { FIELD_STATES, type FieldState } from '@ui/shared/types/field';
diff --git a/packages/ui/src/components/number-field/number-field.module.css b/packages/ui/src/components/number-field/number-field.module.css
new file mode 100644
index 000000000..71ca3a1b5
--- /dev/null
+++ b/packages/ui/src/components/number-field/number-field.module.css
@@ -0,0 +1,170 @@
+@layer ui.component {
+  .number-field {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    overflow: hidden;
+    background-color: var(--ax-public-number-field-root-background-color);
+    border: var(--ax-public-number-field-root-border-size) solid var(--ax-public-number-field-root-border-color);
+    color: var(--ax-public-number-field-root-icon-color);
+    cursor: text;
+
+    &[data-field-state='default']:not([data-field-disabled]):not(:focus-within):hover {
+      border-color: var(--ax-public-number-field-root-border-color-hover);
+    }
+
+    &[data-field-state='default']:not([data-field-disabled]):focus-within {
+      border-color: var(--ax-public-number-field-root-border-color-focus);
+    }
+
+    &[data-field-state='critical']:not([data-field-disabled]) {
+      background-color: var(--ax-public-number-field-root-background-color-critical);
+      border-color: var(--ax-public-number-field-root-border-color-critical);
+    }
+
+    &[data-field-state='success']:not([data-field-disabled]) {
+      background-color: var(--ax-public-number-field-root-background-color-success);
+      border-color: var(--ax-public-number-field-root-border-color-success);
+    }
+
+    &[data-field-state='read-only']:not([data-field-disabled]),
+    &[data-field-disabled] {
+      background-color: var(--ax-public-number-field-root-background-color-disabled);
+      border-color: var(--ax-public-number-field-root-border-color);
+    }
+
+    &[data-field-disabled] {
+      color: var(--ax-public-number-field-color-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  .l {
+    --ax-private-number-field-padding-block: var(--wb-space-137);
+  }
+
+  .m {
+    --ax-private-number-field-padding-block: var(--wb-space-125);
+  }
+
+  .s {
+    --ax-private-number-field-padding-block: var(--wb-space-100);
+  }
+
+  .xs {
+    --ax-private-number-field-padding-block: var(--wb-space-75);
+  }
+
+  .input {
+    min-width: 0;
+    width: 100%;
+    flex: 1;
+    border: none;
+    background: transparent;
+    padding: 0;
+    color: var(--ax-public-number-field-color);
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:disabled {
+      color: var(--ax-public-number-field-color-disabled);
+      cursor: not-allowed;
+    }
+
+    &::placeholder {
+      color: var(--ax-public-number-field-placeholder-color);
+      opacity: 1;
+    }
+  }
+
+  .icon,
+  .clear {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon {
+    pointer-events: none;
+  }
+
+  .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-number-field-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;
+    }
+  }
+
+  .stepper {
+    display: flex;
+    width: var(--wb-size-300);
+    align-self: stretch;
+    flex: 0 0 var(--wb-size-300);
+    flex-direction: column;
+    margin-block: calc(var(--ax-private-number-field-padding-block) * -1);
+    margin-inline-end: calc(var(--wb-space-150) * -1);
+  }
+
+  .stepper-button {
+    display: flex;
+    width: 100%;
+    min-height: 0;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-left: var(--wb-size-12) solid var(--ax-public-number-field-stepper-border-color);
+    background-color: var(--ax-public-number-field-stepper-background-color);
+    color: var(--ax-public-number-field-root-icon-color);
+    cursor: pointer;
+
+    &:hover:not(:disabled, [data-disabled]) {
+      background-color: var(--ax-public-number-field-stepper-background-color-hover);
+    }
+
+    &:active:not(:disabled, [data-disabled]) {
+      background-color: var(--ax-public-number-field-stepper-background-color-active);
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      background-color: var(--ax-public-number-field-stepper-background-color-disabled);
+      color: var(--ax-public-number-field-color-disabled);
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: var(--wb-size-150);
+      height: var(--wb-size-150);
+    }
+  }
+
+  .decrement {
+    border-top: var(--wb-size-12) solid var(--ax-public-number-field-stepper-border-color);
+  }
+}
diff --git a/packages/ui/src/components/number-field/number-field.spec.tsx b/packages/ui/src/components/number-field/number-field.spec.tsx
new file mode 100644
index 000000000..1e3e3c639
--- /dev/null
+++ b/packages/ui/src/components/number-field/number-field.spec.tsx
@@ -0,0 +1,85 @@
+import { act, createRef } from 'react';
+import { type Root, createRoot } from 'react-dom/client';
+
+import { NumberField } from './number-field';
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+it('steps with arrow keys while respecting the bounds', () => {
+  const values: number[] = [];
+
+  act(() => {
+    root.render(
+      <NumberField
+        aria-label="Quantity"
+        defaultValue={1}
+        min={0}
+        max={2}
+        onValueChange={(value) => values.push(value)}
+      />,
+    );
+  });
+
+  const input = container.querySelector('input');
+  expect(input).not.toBeNull();
+
+  act(() => input?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })));
+  act(() => input?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })));
+
+  expect(values).toEqual([2]);
+
+  act(() => input?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })));
+
+  expect(values).toEqual([2, 1]);
+});
+
+it('keeps disabled steppers out of the tab order', () => {
+  act(() => root.render(<NumberField aria-label="Quantity" disabled />));
+
+  const buttons = container.querySelectorAll<HTMLButtonElement>(
+    'button[aria-label="Increment value"], button[aria-label="Decrement value"]',
+  );
+  expect(buttons).toHaveLength(2);
+
+  for (const button of buttons) {
+    expect(button.disabled).toBe(true);
+    expect(button.tabIndex).toBe(-1);
+  }
+});
+
+it('keeps the read-only input focusable and copyable', () => {
+  const ref = createRef<HTMLInputElement>();
+
+  act(() => root.render(<NumberField ref={ref} aria-label="Quantity" state="read-only" value={3} />));
+
+  expect(ref.current?.readOnly).toBe(true);
+  expect(ref.current?.disabled).toBe(false);
+  expect(ref.current?.tabIndex).toBe(0);
+});
+
+it('renders an accessible clear affordance', () => {
+  const onClear = vi.fn();
+
+  act(() => root.render(<NumberField aria-label="Quantity" onClear={onClear} />));
+
+  const clearButton = container.querySelector<HTMLButtonElement>('button[aria-label="Clear number field"]');
+  expect(clearButton).not.toBeNull();
+
+  act(() => clearButton?.click());
+
+  expect(onClear).toHaveBeenCalledOnce();
+});
diff --git a/packages/ui/src/components/number-field/number-field.tsx b/packages/ui/src/components/number-field/number-field.tsx
new file mode 100644
index 000000000..a7607ee63
--- /dev/null
+++ b/packages/ui/src/components/number-field/number-field.tsx
@@ -0,0 +1,96 @@
+import { NumberField as NumberFieldBase } from '@base-ui/react/number-field';
+import { CaretDown, CaretUp, X } from '@phosphor-icons/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+
+import styles from './number-field.module.css';
+import './variables.css';
+import inputFontStyles from '@ui/shared/styles/input-font-size.module.css';
+import inputSizeStyles from '@ui/shared/styles/input-size.module.css';
+
+import type { NumberFieldProps } from './types';
+
+export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(
+  {
+    value,
+    defaultValue,
+    onValueChange,
+    min,
+    max,
+    step = 1,
+    size = 'm',
+    state = 'default',
+    prefixIcon,
+    suffixIcon,
+    onClear,
+    className,
+    disabled,
+    readOnly,
+    id,
+    name,
+    form,
+    required,
+    ...props
+  },
+  ref,
+) {
+  const isReadOnly = state === 'read-only' || readOnly === true;
+  const fieldState = isReadOnly ? 'read-only' : state;
+
+  return (
+    <NumberFieldBase.Root
+      value={value}
+      defaultValue={defaultValue}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+      readOnly={isReadOnly}
+      id={id}
+      name={name}
+      form={form}
+      required={required}
+      onValueChange={(nextValue) => {
+        if (nextValue !== null) onValueChange?.(nextValue);
+      }}
+    >
+      <NumberFieldBase.Group
+        className={clsx(styles['number-field'], styles[size], inputSizeStyles[size], className)}
+        data-field-state={fieldState}
+        data-field-disabled={disabled || undefined}
+        onPointerDown={(event) => {
+          if (event.target !== event.currentTarget) return;
+          event.preventDefault();
+          event.currentTarget.querySelector('input')?.focus();
+        }}
+      >
+        {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>}
+        <NumberFieldBase.Input {...props} ref={ref} className={clsx(styles['input'], inputFontStyles[size])} />
+        {suffixIcon && <span className={styles['icon']}>{suffixIcon}</span>}
+        {onClear && (
+          <button
+            type="button"
+            className={styles['clear']}
+            aria-label="Clear number field"
+            disabled={disabled || isReadOnly}
+            onPointerDown={(event) => event.preventDefault()}
+            onClick={onClear}
+          >
+            <X />
+          </button>
+        )}
+        <span className={styles['stepper']}>
+          <NumberFieldBase.Increment className={styles['stepper-button']} aria-label="Increment value">
+            <CaretUp />
+          </NumberFieldBase.Increment>
+          <NumberFieldBase.Decrement
+            className={clsx(styles['stepper-button'], styles['decrement'])}
+            aria-label="Decrement value"
+          >
+            <CaretDown />
+          </NumberFieldBase.Decrement>
+        </span>
+      </NumberFieldBase.Group>
+    </NumberFieldBase.Root>
+  );
+});
diff --git a/packages/ui/src/components/number-field/types.ts b/packages/ui/src/components/number-field/types.ts
new file mode 100644
index 000000000..33deab07e
--- /dev/null
+++ b/packages/ui/src/components/number-field/types.ts
@@ -0,0 +1,18 @@
+import type { FieldControlProps } from '@ui/shared/types/field';
+import type { InputHTMLAttributes } from 'react';
+
+export type NumberFieldProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'defaultValue' | 'max' | 'min' | 'size' | 'step' | 'type' | 'value'
+> &
+  FieldControlProps & {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    /**
+     * @default 1
+     */
+    step?: number;
+  };
diff --git a/packages/ui/src/components/number-field/variables.css b/packages/ui/src/components/number-field/variables.css
new file mode 100644
index 000000000..e50ea3ff2
--- /dev/null
+++ b/packages/ui/src/components/number-field/variables.css
@@ -0,0 +1,21 @@
+:root {
+  --ax-public-number-field-color: var(--wb-ui-text-default);
+  --ax-public-number-field-color-disabled: var(--wb-ui-text-ghost-default);
+  --ax-public-number-field-placeholder-color: var(--wb-ui-text-ghost-default);
+  --ax-public-number-field-root-background-color: var(--wb-ui-bg-base);
+  --ax-public-number-field-root-background-color-disabled: var(--wb-ui-bg-fill-disabled);
+  --ax-public-number-field-root-background-color-critical: var(--wb-components-text-field-bg-primary-critical);
+  --ax-public-number-field-root-background-color-success: var(--wb-components-text-field-bg-primary-success);
+  --ax-public-number-field-root-border-color: var(--wb-components-text-field-stroke-default);
+  --ax-public-number-field-root-border-color-hover: var(--wb-ui-stroke-default);
+  --ax-public-number-field-root-border-color-focus: var(--wb-components-text-field-stroke-focus);
+  --ax-public-number-field-root-border-color-critical: var(--wb-components-text-field-stroke-critical);
+  --ax-public-number-field-root-border-color-success: var(--wb-components-text-field-stroke-success);
+  --ax-public-number-field-root-border-size: var(--wb-size-12);
+  --ax-public-number-field-root-icon-color: var(--wb-ui-text-subtle-default);
+  --ax-public-number-field-stepper-background-color: var(--wb-ui-bg-base);
+  --ax-public-number-field-stepper-background-color-hover: var(--wb-ui-bg-fill-hover);
+  --ax-public-number-field-stepper-background-color-active: var(--wb-ui-bg-fill-active);
+  --ax-public-number-field-stepper-background-color-disabled: var(--wb-ui-bg-fill-disabled);
+  --ax-public-number-field-stepper-border-color: var(--wb-ui-stroke-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..940c13e95 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,87 @@
 :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%;
+    height: auto;
     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) {
+    &[data-state='default']:not([data-disabled]):focus-within {
       border-color: var(--ax-public-textarea-root-border-color-focus);
     }
 
-    &: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='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--disabled) {
-      color: var(--ax-public-textarea-root-color-disabled);
+    &[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);
+    }
+
+    &[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;
     }
   }
 
+  .text-area-container.text-area-container {
+    height: auto;
+  }
+
+  .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 +92,50 @@
       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 {
+    pointer-events: none;
+  }
+
+  .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..e1875dd53 100644
--- a/packages/ui/src/components/text-area/text-area.tsx
+++ b/packages/ui/src/components/text-area/text-area.tsx
@@ -1,125 +1,73 @@
+import { X } from '@phosphor-icons/react';
+import type { FieldControlProps } 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 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 = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style'> &
+  FieldControlProps & {
+    maxRows?: number;
+    minRows?: number;
+    style?: ComponentPropsWithoutRef<typeof TextareaAutosize>['style'];
+  };
 
-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;
-};
-
-/**
- * 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,
+    maxRows,
+    minRows,
+    disabled,
+    readOnly,
     className,
-  );
-
-  const textareaClasses = clsx(styles['text-area'], inputFontStyles[size]);
+    ...props
+  },
+  ref,
+) {
+  const isReadOnly = state === 'read-only' || readOnly === true;
+  const fieldState = isReadOnly ? 'read-only' : state;
 
   return (
     <div
-      className={containerClasses}
-      // Padding lives on the wrapper, so clicks there miss the field - forward them.
+      className={clsx(styles['text-area-container'], styles[`size-${size}`], inputSizeStyles[size], className)}
+      data-state={fieldState}
+      data-disabled={disabled || undefined}
       onPointerDown={(event) => {
         if (event.target !== event.currentTarget) return;
         event.preventDefault();
         event.currentTarget.querySelector('textarea')?.focus();
       }}
     >
+      {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>}
       <TextareaAutosize
-        value={value || ''}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
+        {...props}
+        ref={ref}
         minRows={minRows}
         maxRows={maxRows}
         disabled={disabled}
-        onChange={onChange}
-        onClick={onClick}
-        onBlur={onBlur}
-        className={textareaClasses}
-        spellCheck={spellCheck}
-        {...props}
+        readOnly={isReadOnly}
+        className={clsx(styles['text-area'], inputFontStyles[size])}
       />
+      {suffixIcon && <span className={styles['icon']}>{suffixIcon}</span>}
+      {onClear && (
+        <button
+          type="button"
+          className={styles['clear']}
+          aria-label="Clear text area"
+          disabled={disabled || isReadOnly}
+          onPointerDown={(event) => event.preventDefault()}
+          onClick={onClear}
+        >
+          <X />
+        </button>
+      )}
     </div>
   );
-}
+});
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index d21caad50..5e40367af 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -15,6 +15,7 @@ export * from './components/input';
 export * from './components/menu';
 export * from './components/modal';
 export * from './components/node';
+export * from './components/number-field';
 export * from './components/radio-button';
 export * from './components/segment-picker';
 export * from './components/select';
@@ -29,3 +30,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/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/styles/input-size.module.css b/packages/ui/src/shared/styles/input-size.module.css
index 6a050f857..ee9cbe25b 100644
--- a/packages/ui/src/shared/styles/input-size.module.css
+++ b/packages/ui/src/shared/styles/input-size.module.css
@@ -1,4 +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));
+
+  --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);
+
   --ax-public-input-padding-large: var(--wb-space-137) var(--wb-space-150);
   --ax-public-input-padding-medium: var(--wb-space-125) var(--wb-space-150);
   --ax-public-input-padding-small: var(--wb-space-100) var(--wb-space-150);
@@ -13,6 +33,34 @@
 }
 
 @layer ui.component {
+  .l {
+    height: var(--ax-public-input-height-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 {
+    height: var(--ax-public-input-height-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 {
+    height: var(--ax-public-input-height-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 {
+    height: var(--ax-public-input-height-xs);
+    padding: var(--ax-public-input-padding-xs);
+    border-radius: var(--ax-public-input-border-radius-xs);
+    gap: var(--ax-public-input-gap-xs);
+  }
+
   .large {
     padding: var(--ax-public-input-padding-large);
     border-radius: var(--ax-public-input-border-radius-large);
diff --git a/packages/ui/src/shared/types/field.ts b/packages/ui/src/shared/types/field.ts
new file mode 100644
index 000000000..922a5c48f
--- /dev/null
+++ b/packages/ui/src/shared/types/field.ts
@@ -0,0 +1,23 @@
+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 = {
+  /**
+   * The read-only state also applies the native read-only behavior.
+   * @default 'default'
+   */
+  state?: FieldState;
+  /**
+   * @default 'm'
+   */
+  size?: FieldSize;
+  prefixIcon?: ReactNode;
+  suffixIcon?: ReactNode;
+  /** Renders a clear affordance that invokes this callback. */
+  onClear?: () => void;
+};
diff --git a/packages/ui/vite.config.mts b/packages/ui/vite.config.mts
index c736f77e0..986f4c474 100644
--- a/packages/ui/vite.config.mts
+++ b/packages/ui/vite.config.mts
@@ -27,6 +27,7 @@ const componentEntries = [
   'menu',
   'modal',
   'node',
+  'number-field',
   'radio-button',
   'segment-picker',
   'select',

From 0686e16e583b165de8a41c8aada95069b655e039 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Fri, 21 Aug 2026 13:24:25 +0200
Subject: [PATCH 2/4] fix(ui)!: compose fields with label and helper rows,
 harden NumberField

Fields render the measured composition again: a label row, the control
row and a helper row. The label is associated with the control, the
helper joins its accessible description, and the critical state marks
the control invalid, so validation text is announced instead of being
merely visible.

Focus is visible in every state, not only the default one.

Interactive adornments no longer go into the decorative icon slot,
which does not take pointer events - the datetime field renders its
variable-picker button beside the input, the way its sibling branches
already do.

NumberField now has a value contract: clearing is representable and
reported, a clamped value is emitted once, a controlled parent that
refuses an update wins, non-finite input never reaches a callback,
step=any keeps working, off-grid boundaries stay submittable, and
malformed paste is rejected rather than reinterpreted. Fifteen tests
pin those paths.
---
 .changeset/form-fields-redesign.md            |   4 +-
 apps/docs/scripts/generate-ui-api.mjs         |  27 +-
 apps/docs/scripts/ui-components.mjs           |  24 +-
 .../docs/src/components/ui-examples/input.tsx |   8 +-
 .../components/ui-examples/number-field.tsx   |  12 +-
 .../src/components/ui-examples/text-area.tsx  |   6 +-
 .../docs/ui-library/ui-components/input.mdx   |   3 +
 .../ui-library/ui-components/number-field.mdx |   4 +-
 .../ui-library/ui-components/text-area.mdx    |   2 +
 .../dynamic-typed-input.module.css            |  13 +
 .../dynamic-typed-input.tsx                   |  56 ++--
 .../components/input/input-root.module.css    |   8 +-
 packages/ui/src/components/input/input.tsx    | 100 ++++---
 .../number-field/number-field.module.css      |   8 +-
 .../number-field/number-field.spec.tsx        | 250 +++++++++++++++-
 .../components/number-field/number-field.tsx  | 277 ++++++++++++++----
 .../ui/src/components/number-field/types.ts   |   9 +-
 .../components/text-area/text-area.module.css |   8 +-
 .../ui/src/components/text-area/text-area.tsx |  92 +++---
 .../shared/components/field/field.module.css  |  35 +++
 .../ui/src/shared/components/field/field.tsx  |  54 ++++
 .../styles/field-control-size.module.css      |  51 ++++
 .../src/shared/styles/input-size.module.css   |  48 ---
 packages/ui/src/shared/types/field.ts         |   5 +-
 24 files changed, 863 insertions(+), 241 deletions(-)
 create mode 100644 packages/ui/src/shared/components/field/field.module.css
 create mode 100644 packages/ui/src/shared/components/field/field.tsx
 create mode 100644 packages/ui/src/shared/styles/field-control-size.module.css

diff --git a/.changeset/form-fields-redesign.md b/.changeset/form-fields-redesign.md
index ce765e23e..dcb48f52c 100644
--- a/.changeset/form-fields-redesign.md
+++ b/.changeset/form-fields-redesign.md
@@ -1,6 +1,6 @@
 ---
 '@workflowbuilder/ui': major
-'@workflowbuilder/sdk': minor
+'@workflowbuilder/sdk': major
 ---
 
-Input and TextArea now take a `state` enum instead of `error`, use letter sizes, and support prefix, suffix, and clear icon slots. Read-only fields remain focusable and copyable, and the new NumberField adds bounded keyboard and stepper controls.
+Input and TextArea now use `state` instead of `error`, letter-based sizes, `prefixIcon`/`suffixIcon` instead of `startAdornment`/`endAdornment`, and an optional clear action. Fields now provide associated label and helper text composition, while NumberField adds nullable values and bounded keyboard and stepper controls.
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 12f3b050d..ec3f49a6a 100644
--- a/apps/docs/scripts/ui-components.mjs
+++ b/apps/docs/scripts/ui-components.mjs
@@ -18,10 +18,22 @@ 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/styles/field-control-size.module.css'],
+  },
   { slug: 'menu', name: 'Menu', propsType: 'MenuProps', dir: 'menu' },
   { slug: 'modal', name: 'Modal', propsType: 'ModalProps', dir: 'modal' },
-  { slug: 'number-field', name: 'NumberField', propsType: 'NumberFieldProps', dir: 'number-field' },
+  {
+    slug: 'number-field',
+    name: 'NumberField',
+    propsType: 'NumberFieldProps',
+    dir: 'number-field',
+    cssSources: ['shared/styles/field-control-size.module.css'],
+  },
   {
     slug: 'nav-button',
     name: 'NavButton',
@@ -40,7 +52,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/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 394871cfa..c0153de99 100644
--- a/apps/docs/src/components/ui-examples/input.tsx
+++ b/apps/docs/src/components/ui-examples/input.tsx
@@ -12,6 +12,7 @@ export function InputExample() {
       <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--wb-space-100)' }}>
         <Input
           size="l"
+          label="Search"
           prefixIcon={<MagnifyingGlass />}
           placeholder="Large input"
           value={value}
@@ -21,6 +22,9 @@ export function InputExample() {
         <Input
           size="m"
           state="critical"
+          label="Project name"
+          helperText="Enter at least three characters"
+          isRequired
           placeholder="Critical input"
           value={value}
           onChange={(event) => setValue(event.target.value)}
@@ -28,11 +32,13 @@ export function InputExample() {
         <Input
           size="s"
           state="success"
+          label="Display name"
+          helperText="Name is available"
           placeholder="Successful input"
           value={value}
           onChange={(event) => setValue(event.target.value)}
         />
-        <Input size="xs" state="read-only" value={value || 'Read-only value'} />
+        <Input label="Identifier" size="xs" state="read-only" value={value || 'Read-only value'} />
       </div>
     </ComponentPreview>
   );
diff --git a/apps/docs/src/components/ui-examples/number-field.tsx b/apps/docs/src/components/ui-examples/number-field.tsx
index 85a780b0e..fa82f2746 100644
--- a/apps/docs/src/components/ui-examples/number-field.tsx
+++ b/apps/docs/src/components/ui-examples/number-field.tsx
@@ -4,11 +4,19 @@ import { useState } from 'react';
 import { ComponentPreview } from './component-preview';
 
 export function NumberFieldExample() {
-  const [value, setValue] = useState(3);
+  const [value, setValue] = useState<number | null>(3);
 
   return (
     <ComponentPreview>
-      <NumberField aria-label="Quantity" value={value} min={0} max={10} step={1} onValueChange={setValue} />
+      <NumberField
+        label="Quantity"
+        helperText="Choose between 0 and 10"
+        value={value}
+        min={0}
+        max={10}
+        step={1}
+        onValueChange={setValue}
+      />
     </ComponentPreview>
   );
 }
diff --git a/apps/docs/src/components/ui-examples/text-area.tsx b/apps/docs/src/components/ui-examples/text-area.tsx
index 3425ac537..175405c5a 100644
--- a/apps/docs/src/components/ui-examples/text-area.tsx
+++ b/apps/docs/src/components/ui-examples/text-area.tsx
@@ -11,6 +11,7 @@ export function TextAreaExample() {
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--wb-space-100)' }}>
         <TextArea
           size="l"
+          label="Description"
           placeholder="Large text area"
           value={value}
           onChange={(event) => setValue(event.target.value)}
@@ -19,11 +20,14 @@ export function TextAreaExample() {
         <TextArea
           size="m"
           state="critical"
+          label="Summary"
+          helperText="A summary is required"
+          isRequired
           placeholder="Critical text area"
           value={value}
           onChange={(event) => setValue(event.target.value)}
         />
-        <TextArea size="s" state="read-only" value={value || 'Read-only value'} />
+        <TextArea label="Notes" size="s" state="read-only" value={value || 'Read-only value'} />
       </div>
     </ComponentPreview>
   );
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 b8cbcffaf..938131b93 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
@@ -28,6 +28,9 @@ function Example() {
     <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)}
diff --git a/apps/docs/src/content/docs/ui-library/ui-components/number-field.mdx b/apps/docs/src/content/docs/ui-library/ui-components/number-field.mdx
index aad127a12..a2e1222a4 100644
--- a/apps/docs/src/content/docs/ui-library/ui-components/number-field.mdx
+++ b/apps/docs/src/content/docs/ui-library/ui-components/number-field.mdx
@@ -20,9 +20,9 @@ import { NumberField } from '@workflowbuilder/ui';
 import { useState } from 'react';
 
 function Example() {
-  const [value, setValue] = useState(3);
+  const [value, setValue] = useState<number | null>(3);
 
-  return <NumberField aria-label="Quantity" value={value} min={0} max={10} onValueChange={setValue} />;
+  return <NumberField label="Quantity" value={value} min={0} max={10} onValueChange={setValue} />;
 }
 ```
 
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 147176caa..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
@@ -25,6 +25,8 @@ function Example() {
     <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/variables/components/dynamic-typed-input/dynamic-typed-input.module.css b/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css
index 1c2718413..0f5062689 100644
--- a/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css
+++ b/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css
@@ -25,6 +25,11 @@
   position: relative;
 }
 
+.time-with-adornment {
+  position: relative;
+  min-width: 0;
+}
+
 .adornment--select {
   position: absolute;
   top: 50%;
@@ -40,3 +45,11 @@
   transform: translateY(-50%);
   z-index: 1;
 }
+
+.adornment--time {
+  position: absolute;
+  top: 50%;
+  right: var(--wb-space-150);
+  transform: translateY(-50%);
+  z-index: 1;
+}
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 36c88a8c2..6667816dc 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
@@ -160,38 +160,40 @@ export function DynamicTypedInput({
           // placeholder="DD-MM-YYYY HH:mm"
           disabled={disabled}
         />
-        <Input
-          className={className}
-          value={time}
-          placeholder="HH:mm"
-          onChange={(event) => {
-            const value = (event.target.value as string).slice(0, 5);
-            if (value.length < 5) {
-              setTime(value);
-
-              return;
-            }
-
-            if (value.length === 5) {
-              if (getIsValidTime(value)) {
+        <div className={styles['time-with-adornment']}>
+          <Input
+            className={className}
+            value={time}
+            placeholder="HH:mm"
+            onChange={(event) => {
+              const value = (event.target.value as string).slice(0, 5);
+              if (value.length < 5) {
                 setTime(value);
 
-                if (date && getIsValidDate(date)) {
-                  onChange(setDateWithTimeFromTime(date, value)?.toISOString());
-                }
-              } else {
-                setTime(timeForRawDates);
+                return;
+              }
+
+              if (value.length === 5) {
+                if (getIsValidTime(value)) {
+                  setTime(value);
 
-                if (date && getIsValidDate(date)) {
-                  onChange(setDateWithTimeFromTime(date, timeForRawDates)?.toISOString());
+                  if (date && getIsValidDate(date)) {
+                    onChange(setDateWithTimeFromTime(date, value)?.toISOString());
+                  }
+                } else {
+                  setTime(timeForRawDates);
+
+                  if (date && getIsValidDate(date)) {
+                    onChange(setDateWithTimeFromTime(date, timeForRawDates)?.toISOString());
+                  }
                 }
               }
-            }
-          }}
-          disabled={disabled || !date}
-          state={isError ? 'critical' : 'default'}
-          suffixIcon={endAdornment}
-        />
+            }}
+            disabled={disabled || !date}
+            state={isError ? 'critical' : 'default'}
+          />
+          {endAdornment && <span className={styles['adornment--time']}>{endAdornment}</span>}
+        </div>
       </div>
     );
   }
diff --git a/packages/ui/src/components/input/input-root.module.css b/packages/ui/src/components/input/input-root.module.css
index 074340ff6..2f8e06498 100644
--- a/packages/ui/src/components/input/input-root.module.css
+++ b/packages/ui/src/components/input/input-root.module.css
@@ -11,10 +11,6 @@
       border-color: var(--ax-public-input-root-border-color-hover);
     }
 
-    &[data-state='default']:not([data-disabled]):focus-within {
-      border-color: var(--ax-public-input-root-border-color-focus);
-    }
-
     &[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);
@@ -35,6 +31,10 @@
       color: var(--ax-public-input-root-color-disabled);
       cursor: not-allowed;
     }
+
+    &:not([data-disabled]):focus-within {
+      border-color: var(--ax-public-input-root-border-color-focus);
+    }
   }
 
   .icon,
diff --git a/packages/ui/src/components/input/input.tsx b/packages/ui/src/components/input/input.tsx
index ac269b58b..ae744b68a 100644
--- a/packages/ui/src/components/input/input.tsx
+++ b/packages/ui/src/components/input/input.tsx
@@ -1,55 +1,89 @@
 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 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 const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { size = 'm', state = 'default', prefixIcon, suffixIcon, onClear, className, disabled, readOnly, ...props },
+  {
+    size = 'm',
+    state = 'default',
+    prefixIcon,
+    suffixIcon,
+    onClear,
+    label,
+    helperText,
+    isRequired,
+    className,
+    disabled,
+    readOnly,
+    id,
+    required,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    ...props
+  },
   ref,
 ) {
-  const isReadOnly = state === 'read-only' || readOnly === true;
-  const fieldState = isReadOnly ? 'read-only' : state;
+  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], className)}
-      data-state={fieldState}
-      data-disabled={disabled || undefined}
-      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}
+      ariaDescribedBy={ariaDescribedBy}
     >
-      {prefixIcon && <span className={inputRootStyles['icon']}>{prefixIcon}</span>}
-      <InputBase
-        {...props}
-        ref={ref}
-        disabled={disabled}
-        readOnly={isReadOnly}
-        className={clsx(inputStyles['input'], inputFontStyles[size])}
-      />
-      {suffixIcon && <span className={inputRootStyles['icon']}>{suffixIcon}</span>}
-      {onClear && (
-        <button
-          type="button"
-          className={inputRootStyles['clear']}
-          aria-label="Clear input"
-          disabled={disabled || isReadOnly}
-          onPointerDown={(event) => event.preventDefault()}
-          onClick={onClear}
+      {({ controlId, describedBy }) => (
+        <div
+          className={clsx(inputRootStyles['input-root'], inputSizeStyles[size], className)}
+          data-state={fieldState}
+          data-disabled={disabled || undefined}
+          onPointerDown={(event) => {
+            if (event.target !== event.currentTarget) return;
+            event.preventDefault();
+            event.currentTarget.querySelector('input')?.focus();
+          }}
         >
-          <X />
-        </button>
+          {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="Clear input"
+              disabled={disabled || isReadOnly}
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={onClear}
+            >
+              <X />
+            </button>
+          )}
+        </div>
       )}
-    </div>
+    </Field>
   );
 });
diff --git a/packages/ui/src/components/number-field/number-field.module.css b/packages/ui/src/components/number-field/number-field.module.css
index 71ca3a1b5..a52c46e54 100644
--- a/packages/ui/src/components/number-field/number-field.module.css
+++ b/packages/ui/src/components/number-field/number-field.module.css
@@ -13,10 +13,6 @@
       border-color: var(--ax-public-number-field-root-border-color-hover);
     }
 
-    &[data-field-state='default']:not([data-field-disabled]):focus-within {
-      border-color: var(--ax-public-number-field-root-border-color-focus);
-    }
-
     &[data-field-state='critical']:not([data-field-disabled]) {
       background-color: var(--ax-public-number-field-root-background-color-critical);
       border-color: var(--ax-public-number-field-root-border-color-critical);
@@ -37,6 +33,10 @@
       color: var(--ax-public-number-field-color-disabled);
       cursor: not-allowed;
     }
+
+    &:not([data-field-disabled]):focus-within {
+      border-color: var(--ax-public-number-field-root-border-color-focus);
+    }
   }
 
   .l {
diff --git a/packages/ui/src/components/number-field/number-field.spec.tsx b/packages/ui/src/components/number-field/number-field.spec.tsx
index 1e3e3c639..d52b1e665 100644
--- a/packages/ui/src/components/number-field/number-field.spec.tsx
+++ b/packages/ui/src/components/number-field/number-field.spec.tsx
@@ -19,8 +19,35 @@ afterEach(() => {
   container.remove();
 });
 
+function getVisibleInput() {
+  const input = container.querySelector<HTMLInputElement>('input[type="text"]');
+  expect(input).not.toBeNull();
+  return input as HTMLInputElement;
+}
+
+function changeInputValue(input: HTMLInputElement, value: string) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+  act(() => {
+    setter?.call(input, value);
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+  });
+}
+
+function pressKey(input: HTMLInputElement, key: string) {
+  act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true })));
+}
+
+function paste(input: HTMLInputElement, text: string) {
+  const event = new Event('paste', { bubbles: true, cancelable: true });
+  Object.defineProperty(event, 'clipboardData', {
+    value: { getData: (type: string) => (type === 'text/plain' ? text : '') },
+  });
+  act(() => input.dispatchEvent(event));
+  return event;
+}
+
 it('steps with arrow keys while respecting the bounds', () => {
-  const values: number[] = [];
+  const values: Array<number | null> = [];
 
   act(() => {
     root.render(
@@ -34,15 +61,14 @@ it('steps with arrow keys while respecting the bounds', () => {
     );
   });
 
-  const input = container.querySelector('input');
-  expect(input).not.toBeNull();
+  const input = getVisibleInput();
 
-  act(() => input?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })));
-  act(() => input?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })));
+  pressKey(input, 'ArrowUp');
+  pressKey(input, 'ArrowUp');
 
   expect(values).toEqual([2]);
 
-  act(() => input?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })));
+  pressKey(input, 'ArrowDown');
 
   expect(values).toEqual([2, 1]);
 });
@@ -71,6 +97,15 @@ it('keeps the read-only input focusable and copyable', () => {
   expect(ref.current?.tabIndex).toBe(0);
 });
 
+it('lets disabled behavior take precedence over read-only state', () => {
+  act(() => root.render(<NumberField aria-label="Quantity" disabled state="read-only" />));
+
+  const input = getVisibleInput();
+  expect(input.disabled).toBe(true);
+  expect(input.readOnly).toBe(false);
+  expect(input.closest('[data-field-state]')?.getAttribute('data-field-state')).toBe('default');
+});
+
 it('renders an accessible clear affordance', () => {
   const onClear = vi.fn();
 
@@ -83,3 +118,206 @@ it('renders an accessible clear affordance', () => {
 
   expect(onClear).toHaveBeenCalledOnce();
 });
+
+it('reports clearing as a nullable value with change details', () => {
+  const changes: Array<{ value: number | null; reason: string }> = [];
+  act(() =>
+    root.render(
+      <NumberField
+        aria-label="Quantity"
+        defaultValue={3}
+        onValueChange={(value, details) => changes.push({ value, reason: details.reason })}
+      />,
+    ),
+  );
+
+  changeInputValue(getVisibleInput(), '');
+
+  expect(changes).toEqual([{ value: null, reason: 'input-clear' }]);
+});
+
+it('emits a clamped typed value only once after blur', () => {
+  const values: Array<number | null> = [];
+  act(() =>
+    root.render(
+      <NumberField aria-label="Quantity" defaultValue={1} max={10} onValueChange={(value) => values.push(value)} />,
+    ),
+  );
+
+  const input = getVisibleInput();
+  act(() => input.focus());
+  changeInputValue(input, '11');
+  act(() => input.blur());
+
+  expect(values).toEqual([10]);
+});
+
+it('resynchronizes a controlled value when its parent refuses an update', () => {
+  const values: Array<number | null> = [];
+  act(() => root.render(<NumberField aria-label="Quantity" value={1} onValueChange={(value) => values.push(value)} />));
+
+  const input = getVisibleInput();
+  act(() => input.focus());
+  changeInputValue(input, '2');
+
+  expect(getVisibleInput().value).toBe('1');
+
+  pressKey(getVisibleInput(), 'ArrowUp');
+
+  expect(values).toEqual([2, 2]);
+  expect(getVisibleInput().value).toBe('1');
+});
+
+it('honors a controlled cancellation without leaving dirty text', () => {
+  const reasons: string[] = [];
+  act(() =>
+    root.render(
+      <NumberField
+        aria-label="Quantity"
+        value={1}
+        onValueChange={(_value, details) => {
+          reasons.push(details.reason);
+          details.cancel();
+        }}
+      />,
+    ),
+  );
+
+  const input = getVisibleInput();
+  act(() => input.focus());
+  changeInputValue(input, '2');
+
+  expect(reasons).toEqual(['input-change']);
+  expect(getVisibleInput().value).toBe('1');
+  expect(document.activeElement).toBe(getVisibleInput());
+});
+
+it('keeps an off-grid clamped boundary valid for form submission', () => {
+  const values: Array<number | null> = [];
+  act(() =>
+    root.render(
+      <form>
+        <NumberField
+          name="quantity"
+          defaultValue={9}
+          min={0}
+          max={10}
+          step={3}
+          onValueChange={(value) => values.push(value)}
+        />
+      </form>,
+    ),
+  );
+
+  const increment = container.querySelector<HTMLButtonElement>('button[aria-label="Increment value"]');
+  act(() => increment?.click());
+
+  const form = container.querySelector('form');
+  const nativeInput = container.querySelector<HTMLInputElement>('input[type="number"]');
+  expect(values).toEqual([10]);
+  expect(nativeInput?.value).toBe('10');
+  expect(nativeInput?.step).toBe('any');
+  expect(nativeInput?.validity.stepMismatch).toBe(false);
+  expect(form?.checkValidity()).toBe(true);
+});
+
+it('normalizes non-finite numeric props and never emits NaN', () => {
+  const values: Array<number | null> = [];
+  act(() =>
+    root.render(
+      <NumberField
+        aria-label="Quantity"
+        value={Number.NaN}
+        min={Number.NEGATIVE_INFINITY}
+        max={Number.POSITIVE_INFINITY}
+        step={Number.NaN}
+        onValueChange={(value) => values.push(value)}
+      />,
+    ),
+  );
+
+  pressKey(getVisibleInput(), 'ArrowUp');
+
+  expect(values).toEqual([0]);
+  expect(values.every((value) => value === null || Number.isFinite(value))).toBe(true);
+
+  act(() =>
+    root.render(
+      <NumberField
+        key="non-finite-default"
+        aria-label="Quantity"
+        defaultValue={Number.POSITIVE_INFINITY}
+        onValueChange={(value) => values.push(value)}
+      />,
+    ),
+  );
+  pressKey(getVisibleInput(), 'ArrowUp');
+
+  expect(values).toEqual([0, 0]);
+});
+
+it.each([0, -2])('normalizes an invalid numeric step of %s', (step) => {
+  const values: Array<number | null> = [];
+  act(() =>
+    root.render(
+      <NumberField aria-label="Quantity" defaultValue={2} step={step} onValueChange={(value) => values.push(value)} />,
+    ),
+  );
+
+  pressKey(getVisibleInput(), 'ArrowUp');
+
+  expect(values).toEqual([3]);
+});
+
+it('supports step="any" while retaining interactive stepping', () => {
+  const values: Array<number | null> = [];
+  act(() =>
+    root.render(
+      <NumberField aria-label="Quantity" defaultValue={1} step="any" onValueChange={(value) => values.push(value)} />,
+    ),
+  );
+
+  pressKey(getVisibleInput(), 'ArrowUp');
+
+  expect(values).toEqual([2]);
+  expect(container.querySelector<HTMLInputElement>('input[type="number"]')?.step).toBe('any');
+});
+
+it('rejects malformed mixed-content paste instead of reinterpreting it', () => {
+  const onValueChange = vi.fn();
+  act(() => root.render(<NumberField aria-label="Quantity" onValueChange={onValueChange} />));
+
+  const input = getVisibleInput();
+  input.setSelectionRange(0, 0);
+  const mixedTextEvent = paste(input, '12abc');
+  const repeatedDecimalEvent = paste(input, '1.2.3');
+
+  expect(mixedTextEvent.defaultPrevented).toBe(true);
+  expect(repeatedDecimalEvent.defaultPrevented).toBe(true);
+  expect(input.value).toBe('');
+  expect(onValueChange).not.toHaveBeenCalled();
+});
+
+it('associates its label and critical helper with the input', () => {
+  act(() =>
+    root.render(
+      <NumberField
+        label="Quantity"
+        helperText="Enter a valid quantity"
+        isRequired
+        state="critical"
+        aria-describedby="external-description"
+      />,
+    ),
+  );
+
+  const input = getVisibleInput();
+  const label = container.querySelector('label');
+  const helper = container.querySelector('[id$="-helper"]');
+  expect(input.id).not.toBe('');
+  expect(label?.htmlFor).toBe(input.id);
+  expect(label?.textContent).toBe('Quantity*');
+  expect(input.required).toBe(true);
+  expect(input.getAttribute('aria-invalid')).toBe('true');
+  expect(input.getAttribute('aria-describedby')?.split(' ')).toEqual(['external-description', helper?.id]);
+});
diff --git a/packages/ui/src/components/number-field/number-field.tsx b/packages/ui/src/components/number-field/number-field.tsx
index a7607ee63..1cd498f13 100644
--- a/packages/ui/src/components/number-field/number-field.tsx
+++ b/packages/ui/src/components/number-field/number-field.tsx
@@ -1,15 +1,75 @@
 import { NumberField as NumberFieldBase } from '@base-ui/react/number-field';
 import { CaretDown, CaretUp, X } from '@phosphor-icons/react';
+import { Field } from '@ui/shared/components/field/field';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import {
+  type ClipboardEvent,
+  type ForwardedRef,
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import styles from './number-field.module.css';
 import './variables.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 { NumberFieldProps } from './types';
 
+const NUMERAL_PATTERN = /^[\p{N}零〇一二三四五六七八九]+$/u;
+const SIGN_PATTERN = /[+＋﹢\-−－‒–—﹣]/u;
+
+function normalizeFinite(value: number | undefined) {
+  return value === undefined || !Number.isFinite(value) ? undefined : value;
+}
+
+function normalizeStep(step: number | 'any') {
+  return step === 'any' || (Number.isFinite(step) && step > 0) ? step : 1;
+}
+
+function isValidPastedNumber(value: string) {
+  let input = value.trim();
+  if (!input) return false;
+
+  const parts = new Intl.NumberFormat().formatToParts(12_345.6);
+  const decimal = parts.find((part) => part.type === 'decimal')?.value ?? '.';
+  const group = parts.find((part) => part.type === 'group')?.value;
+  const characters = [...input];
+  const firstIsSign = SIGN_PATTERN.test(characters[0] ?? '');
+  const lastIsSign = SIGN_PATTERN.test(characters.at(-1) ?? '');
+
+  if (firstIsSign && lastIsSign && characters.length > 1) return false;
+  if (firstIsSign) input = characters.slice(1).join('');
+  if (lastIsSign) input = characters.slice(0, -1).join('');
+  if (SIGN_PATTERN.test(input)) return false;
+
+  const decimalParts = input.split(decimal);
+  if (decimalParts.length > 2) return false;
+
+  const [integer, fraction] = decimalParts;
+  if (fraction !== undefined && fraction !== '' && !NUMERAL_PATTERN.test(fraction)) return false;
+  if (!integer && !fraction) return false;
+
+  if (!integer) return true;
+  if (!group || !integer.includes(group)) return NUMERAL_PATTERN.test(integer);
+
+  const groups = integer.split(group);
+  return (
+    groups.length > 1 &&
+    groups[0].length > 0 &&
+    groups[0].length <= 3 &&
+    groups.every((part, index) => NUMERAL_PATTERN.test(part) && (index === 0 || part.length === 3))
+  );
+}
+
+function setRef(ref: ForwardedRef<HTMLInputElement>, value: HTMLInputElement | null) {
+  if (typeof ref === 'function') ref(value);
+  else if (ref) ref.current = value;
+}
+
 export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(
   {
     value,
@@ -23,6 +83,9 @@ export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(functi
     prefixIcon,
     suffixIcon,
     onClear,
+    label,
+    helperText,
+    isRequired,
     className,
     disabled,
     readOnly,
@@ -30,67 +93,171 @@ export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(functi
     name,
     form,
     required,
+    onPaste,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
     ...props
   },
   ref,
 ) {
-  const isReadOnly = state === 'read-only' || readOnly === true;
-  const fieldState = isReadOnly ? 'read-only' : state;
+  const normalizedValue = value == null || Number.isFinite(value) ? value : null;
+  const normalizedDefaultValue = defaultValue == null ? undefined : normalizeFinite(defaultValue);
+  const normalizedMin = normalizeFinite(min);
+  const normalizedMax = normalizeFinite(max);
+  const normalizedStep = normalizeStep(step);
+  const isReadOnly = !disabled && (state === 'read-only' || readOnly === true);
+  const fieldState = disabled && state === 'read-only' ? 'default' : isReadOnly ? 'read-only' : state;
+  const isNativeRequired = required || isRequired;
+  const visibleInputRef = useRef<HTMLInputElement | null>(null);
+  const restoreFocusRef = useRef(false);
+  const lastReportedValueRef = useRef<number | null | undefined>(undefined);
+  const pendingControlledValueRef = useRef<number | null | undefined>(undefined);
+  const [resetVersion, setResetVersion] = useState(0);
+  const [proposalVersion, setProposalVersion] = useState(0);
+  const isControlled = value !== undefined;
+  const maxIsOffStep =
+    typeof normalizedStep === 'number' &&
+    normalizedMax !== undefined &&
+    Math.abs(
+      (normalizedMax - (normalizedMin ?? 0)) / normalizedStep -
+        Math.round((normalizedMax - (normalizedMin ?? 0)) / normalizedStep),
+    ) > 1e-10;
+  const setVisibleInputRef = useCallback(
+    (element: HTMLInputElement | null) => {
+      visibleInputRef.current = element;
+      setRef(ref, element);
+    },
+    [ref],
+  );
+  const setHiddenInputRef = useCallback(
+    (element: HTMLInputElement | null) => {
+      if (element) element.step = maxIsOffStep || normalizedStep === 'any' ? 'any' : String(normalizedStep);
+    },
+    [maxIsOffStep, normalizedStep],
+  );
+
+  useLayoutEffect(() => {
+    if (pendingControlledValueRef.current === undefined) return;
+
+    const proposedValue = pendingControlledValueRef.current;
+    pendingControlledValueRef.current = undefined;
+    if (!Object.is(normalizedValue, proposedValue)) setResetVersion((current) => current + 1);
+  }, [normalizedValue, proposalVersion]);
+
+  useLayoutEffect(() => {
+    if (!restoreFocusRef.current) return;
+
+    restoreFocusRef.current = false;
+    visibleInputRef.current?.focus();
+  }, [resetVersion]);
+
+  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
+    onPaste?.(event);
+    if (event.defaultPrevented) return;
+
+    const pastedText = event.clipboardData.getData('text/plain');
+    const selectionStart = event.currentTarget.selectionStart ?? event.currentTarget.value.length;
+    const selectionEnd = event.currentTarget.selectionEnd ?? selectionStart;
+    const nextText =
+      event.currentTarget.value.slice(0, selectionStart) + pastedText + event.currentTarget.value.slice(selectionEnd);
+
+    if (!isValidPastedNumber(nextText)) event.preventDefault();
+  };
 
   return (
-    <NumberFieldBase.Root
-      value={value}
-      defaultValue={defaultValue}
-      min={min}
-      max={max}
-      step={step}
-      disabled={disabled}
-      readOnly={isReadOnly}
+    <Field
       id={id}
-      name={name}
-      form={form}
-      required={required}
-      onValueChange={(nextValue) => {
-        if (nextValue !== null) onValueChange?.(nextValue);
-      }}
+      label={label}
+      helperText={helperText}
+      isRequired={isNativeRequired}
+      state={fieldState}
+      ariaDescribedBy={ariaDescribedBy}
     >
-      <NumberFieldBase.Group
-        className={clsx(styles['number-field'], styles[size], inputSizeStyles[size], className)}
-        data-field-state={fieldState}
-        data-field-disabled={disabled || undefined}
-        onPointerDown={(event) => {
-          if (event.target !== event.currentTarget) return;
-          event.preventDefault();
-          event.currentTarget.querySelector('input')?.focus();
-        }}
-      >
-        {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>}
-        <NumberFieldBase.Input {...props} ref={ref} className={clsx(styles['input'], inputFontStyles[size])} />
-        {suffixIcon && <span className={styles['icon']}>{suffixIcon}</span>}
-        {onClear && (
-          <button
-            type="button"
-            className={styles['clear']}
-            aria-label="Clear number field"
-            disabled={disabled || isReadOnly}
-            onPointerDown={(event) => event.preventDefault()}
-            onClick={onClear}
-          >
-            <X />
-          </button>
-        )}
-        <span className={styles['stepper']}>
-          <NumberFieldBase.Increment className={styles['stepper-button']} aria-label="Increment value">
-            <CaretUp />
-          </NumberFieldBase.Increment>
-          <NumberFieldBase.Decrement
-            className={clsx(styles['stepper-button'], styles['decrement'])}
-            aria-label="Decrement value"
+      {({ controlId, describedBy }) => (
+        <NumberFieldBase.Root
+          key={resetVersion}
+          value={normalizedValue}
+          defaultValue={normalizedDefaultValue}
+          min={normalizedMin}
+          max={normalizedMax}
+          step={normalizedStep}
+          disabled={disabled}
+          readOnly={isReadOnly}
+          id={controlId}
+          name={name}
+          form={form}
+          required={isNativeRequired}
+          inputRef={setHiddenInputRef}
+          onValueChange={(nextValue, details) => {
+            if (nextValue !== null && !Number.isFinite(nextValue)) {
+              details.cancel();
+              return;
+            }
+            if (details.reason === 'input-blur' && Object.is(lastReportedValueRef.current, nextValue)) return;
+
+            onValueChange?.(nextValue, details);
+            if (details.isCanceled) {
+              if (isControlled) {
+                restoreFocusRef.current = document.activeElement === visibleInputRef.current;
+                setResetVersion((current) => current + 1);
+              }
+              return;
+            }
+
+            lastReportedValueRef.current = nextValue;
+            if (isControlled) {
+              pendingControlledValueRef.current = nextValue;
+              restoreFocusRef.current = document.activeElement === visibleInputRef.current;
+              setProposalVersion((current) => current + 1);
+            }
+          }}
+        >
+          <NumberFieldBase.Group
+            className={clsx(styles['number-field'], styles[size], inputSizeStyles[size], className)}
+            data-field-state={fieldState}
+            data-field-disabled={disabled || undefined}
+            onPointerDown={(event) => {
+              if (event.target !== event.currentTarget) return;
+              event.preventDefault();
+              event.currentTarget.querySelector('input')?.focus();
+            }}
           >
-            <CaretDown />
-          </NumberFieldBase.Decrement>
-        </span>
-      </NumberFieldBase.Group>
-    </NumberFieldBase.Root>
+            {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>}
+            <NumberFieldBase.Input
+              {...props}
+              ref={setVisibleInputRef}
+              onPaste={handlePaste}
+              aria-describedby={describedBy}
+              aria-invalid={fieldState === 'critical' ? true : ariaInvalid}
+              className={clsx(styles['input'], inputFontStyles[size])}
+            />
+            {suffixIcon && <span className={styles['icon']}>{suffixIcon}</span>}
+            {onClear && (
+              <button
+                type="button"
+                className={styles['clear']}
+                aria-label="Clear number field"
+                disabled={disabled || isReadOnly}
+                onPointerDown={(event) => event.preventDefault()}
+                onClick={onClear}
+              >
+                <X />
+              </button>
+            )}
+            <span className={styles['stepper']}>
+              <NumberFieldBase.Increment className={styles['stepper-button']} aria-label="Increment value">
+                <CaretUp />
+              </NumberFieldBase.Increment>
+              <NumberFieldBase.Decrement
+                className={clsx(styles['stepper-button'], styles['decrement'])}
+                aria-label="Decrement value"
+              >
+                <CaretDown />
+              </NumberFieldBase.Decrement>
+            </span>
+          </NumberFieldBase.Group>
+        </NumberFieldBase.Root>
+      )}
+    </Field>
   );
 });
diff --git a/packages/ui/src/components/number-field/types.ts b/packages/ui/src/components/number-field/types.ts
index 33deab07e..4b59599ea 100644
--- a/packages/ui/src/components/number-field/types.ts
+++ b/packages/ui/src/components/number-field/types.ts
@@ -1,3 +1,4 @@
+import type { NumberFieldRootChangeEventDetails } from '@base-ui/react/number-field';
 import type { FieldControlProps } from '@ui/shared/types/field';
 import type { InputHTMLAttributes } from 'react';
 
@@ -6,13 +7,13 @@ export type NumberFieldProps = Omit<
   'defaultValue' | 'max' | 'min' | 'size' | 'step' | 'type' | 'value'
 > &
   FieldControlProps & {
-    value?: number;
-    defaultValue?: number;
-    onValueChange?: (value: number) => void;
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null, details: NumberFieldRootChangeEventDetails) => void;
     min?: number;
     max?: number;
     /**
      * @default 1
      */
-    step?: number;
+    step?: number | 'any';
   };
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 940c13e95..0ad674a2f 100644
--- a/packages/ui/src/components/text-area/text-area.module.css
+++ b/packages/ui/src/components/text-area/text-area.module.css
@@ -31,10 +31,6 @@
       border-color: var(--ax-public-textarea-root-border-color-hover);
     }
 
-    &[data-state='default']:not([data-disabled]):focus-within {
-      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);
@@ -55,6 +51,10 @@
       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);
+    }
   }
 
   .text-area-container.text-area-container {
diff --git a/packages/ui/src/components/text-area/text-area.tsx b/packages/ui/src/components/text-area/text-area.tsx
index e1875dd53..f0250341c 100644
--- a/packages/ui/src/components/text-area/text-area.tsx
+++ b/packages/ui/src/components/text-area/text-area.tsx
@@ -1,12 +1,13 @@
 import { X } from '@phosphor-icons/react';
+import { Field } from '@ui/shared/components/field/field';
 import type { FieldControlProps } from '@ui/shared/types/field';
 import clsx from 'clsx';
 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';
 
 export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style'> &
   FieldControlProps & {
@@ -22,52 +23,75 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
     prefixIcon,
     suffixIcon,
     onClear,
+    label,
+    helperText,
+    isRequired,
     maxRows,
     minRows,
     disabled,
     readOnly,
     className,
+    id,
+    required,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
     ...props
   },
   ref,
 ) {
-  const isReadOnly = state === 'read-only' || readOnly === true;
-  const fieldState = isReadOnly ? 'read-only' : state;
+  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(styles['text-area-container'], styles[`size-${size}`], inputSizeStyles[size], className)}
-      data-state={fieldState}
-      data-disabled={disabled || undefined}
-      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}
+      ariaDescribedBy={ariaDescribedBy}
     >
-      {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>}
-      <TextareaAutosize
-        {...props}
-        ref={ref}
-        minRows={minRows}
-        maxRows={maxRows}
-        disabled={disabled}
-        readOnly={isReadOnly}
-        className={clsx(styles['text-area'], inputFontStyles[size])}
-      />
-      {suffixIcon && <span className={styles['icon']}>{suffixIcon}</span>}
-      {onClear && (
-        <button
-          type="button"
-          className={styles['clear']}
-          aria-label="Clear text area"
-          disabled={disabled || isReadOnly}
-          onPointerDown={(event) => event.preventDefault()}
-          onClick={onClear}
+      {({ 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 !== event.currentTarget) return;
+            event.preventDefault();
+            event.currentTarget.querySelector('textarea')?.focus();
+          }}
         >
-          <X />
-        </button>
+          {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="Clear text area"
+              disabled={disabled || isReadOnly}
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={onClear}
+            >
+              <X />
+            </button>
+          )}
+        </div>
       )}
-    </div>
+    </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..e50199b48
--- /dev/null
+++ b/packages/ui/src/shared/components/field/field.module.css
@@ -0,0 +1,35 @@
+@layer ui.component {
+  .field {
+    display: flex;
+    min-width: 0;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--wb-space-75);
+  }
+
+  .label,
+  .helper {
+    display: flex;
+    height: var(--wb-size-200);
+    align-items: center;
+    font-size: var(--wb-font-size-150);
+    font-weight: 400;
+    line-height: var(--wb-size-200);
+  }
+
+  .label {
+    color: var(--wb-ui-text-default);
+  }
+
+  .required {
+    color: var(--wb-components-text-field-stroke-critical);
+  }
+
+  .helper {
+    color: var(--wb-ui-text-subtle-default);
+  }
+
+  .field[data-state='critical'] .helper {
+    color: var(--wb-components-text-field-stroke-critical);
+  }
+}
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..fc6aa46e7
--- /dev/null
+++ b/packages/ui/src/shared/components/field/field.tsx
@@ -0,0 +1,54 @@
+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;
+  helperText?: ReactNode;
+  id?: string;
+  isRequired?: boolean;
+  label?: ReactNode;
+  state: FieldState;
+};
+
+export function Field({ ariaDescribedBy, children, helperText, id, isRequired, label, state }: FieldProps) {
+  const generatedId = useId();
+  const hasLabel = label !== undefined && label !== null;
+  const hasHelper = helperText !== undefined && helperText !== null;
+  const isComposed = hasLabel || hasHelper;
+  const controlId = id ?? (isComposed ? generatedId : undefined);
+  const helperId = hasHelper ? `${controlId ?? generatedId}-helper` : undefined;
+  const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;
+  const control = children({ controlId, describedBy });
+
+  if (!isComposed) return control;
+
+  return (
+    <div className={styles['field']} data-state={state}>
+      {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}>
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+}
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..59f0cefa3
--- /dev/null
+++ b/packages/ui/src/shared/styles/field-control-size.module.css
@@ -0,0 +1,51 @@
+: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));
+
+  --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 {
+    height: var(--ax-public-input-height-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 {
+    height: var(--ax-public-input-height-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 {
+    height: var(--ax-public-input-height-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 {
+    height: var(--ax-public-input-height-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-size.module.css b/packages/ui/src/shared/styles/input-size.module.css
index ee9cbe25b..6a050f857 100644
--- a/packages/ui/src/shared/styles/input-size.module.css
+++ b/packages/ui/src/shared/styles/input-size.module.css
@@ -1,24 +1,4 @@
 :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));
-
-  --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);
-
   --ax-public-input-padding-large: var(--wb-space-137) var(--wb-space-150);
   --ax-public-input-padding-medium: var(--wb-space-125) var(--wb-space-150);
   --ax-public-input-padding-small: var(--wb-space-100) var(--wb-space-150);
@@ -33,34 +13,6 @@
 }
 
 @layer ui.component {
-  .l {
-    height: var(--ax-public-input-height-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 {
-    height: var(--ax-public-input-height-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 {
-    height: var(--ax-public-input-height-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 {
-    height: var(--ax-public-input-height-xs);
-    padding: var(--ax-public-input-padding-xs);
-    border-radius: var(--ax-public-input-border-radius-xs);
-    gap: var(--ax-public-input-gap-xs);
-  }
-
   .large {
     padding: var(--ax-public-input-padding-large);
     border-radius: var(--ax-public-input-border-radius-large);
diff --git a/packages/ui/src/shared/types/field.ts b/packages/ui/src/shared/types/field.ts
index 922a5c48f..6ad70754b 100644
--- a/packages/ui/src/shared/types/field.ts
+++ b/packages/ui/src/shared/types/field.ts
@@ -8,7 +8,7 @@ export type FieldSize = (typeof FIELD_SIZES)[number];
 
 export type FieldControlProps = {
   /**
-   * The read-only state also applies the native read-only behavior.
+   * Disabled controls take precedence over the read-only state.
    * @default 'default'
    */
   state?: FieldState;
@@ -20,4 +20,7 @@ export type FieldControlProps = {
   suffixIcon?: ReactNode;
   /** Renders a clear affordance that invokes this callback. */
   onClear?: () => void;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  isRequired?: boolean;
 };

From 3a58ec8e189ad6c7c742a9f69f8165f7a2fff20a Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Mon, 24 Aug 2026 08:46:17 +0200
Subject: [PATCH 3/4] docs(sdk): declare the field adoption as a minor bump

---
 .changeset/form-fields-redesign.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/form-fields-redesign.md b/.changeset/form-fields-redesign.md
index dcb48f52c..80716dc62 100644
--- a/.changeset/form-fields-redesign.md
+++ b/.changeset/form-fields-redesign.md
@@ -1,6 +1,6 @@
 ---
 '@workflowbuilder/ui': major
-'@workflowbuilder/sdk': 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. Fields now provide associated label and helper text composition, while NumberField adds nullable values and bounded keyboard and stepper controls.

From 1ea85e422f608b1443929d43d075f89b006e2a47 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Wed, 26 Aug 2026 00:05:42 +0200
Subject: [PATCH 4/4] fix(ui)!: simplify NumberField and harden field
 composition

---
 apps/docs/scripts/ui-components.mjs           |  14 +-
 .../docs/src/components/ui-examples/input.tsx |  20 +-
 .../src/components/ui-examples/text-area.tsx  |  15 +-
 .../dynamic-typed-input.module.css            |  13 --
 .../dynamic-typed-input.tsx                   |  63 +++---
 .../components/input/input-root.module.css    |   4 -
 packages/ui/src/components/input/input.tsx    |  10 +-
 .../number-field/number-field.module.css      |  13 +-
 .../number-field/number-field.spec.tsx        | 160 ++++++++------
 .../components/number-field/number-field.tsx  | 195 ++++--------------
 .../number-field/number-field.utils.ts        |  71 +++++++
 .../ui/src/components/number-field/types.ts   |   3 +
 .../components/text-area/text-area.module.css |   9 -
 .../ui/src/components/text-area/text-area.tsx |  22 +-
 .../shared/components/field/field.module.css  |  37 +++-
 .../ui/src/shared/components/field/field.tsx  |   9 +-
 .../styles/field-control-height.module.css    |  24 +++
 .../styles/field-control-size.module.css      |   9 -
 18 files changed, 358 insertions(+), 333 deletions(-)
 create mode 100644 packages/ui/src/components/number-field/number-field.utils.ts
 create mode 100644 packages/ui/src/shared/styles/field-control-height.module.css

diff --git a/apps/docs/scripts/ui-components.mjs b/apps/docs/scripts/ui-components.mjs
index ec3f49a6a..9f4febfd4 100644
--- a/apps/docs/scripts/ui-components.mjs
+++ b/apps/docs/scripts/ui-components.mjs
@@ -23,7 +23,11 @@ export const COMPONENTS = [
     name: 'Input',
     propsType: 'InputProps',
     dir: 'input',
-    cssSources: ['shared/styles/field-control-size.module.css'],
+    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' },
@@ -32,7 +36,11 @@ export const COMPONENTS = [
     name: 'NumberField',
     propsType: 'NumberFieldProps',
     dir: 'number-field',
-    cssSources: ['shared/styles/field-control-size.module.css'],
+    cssSources: [
+      'shared/components/field/field.module.css',
+      'shared/styles/field-control-height.module.css',
+      'shared/styles/field-control-size.module.css',
+    ],
   },
   {
     slug: 'nav-button',
@@ -57,7 +65,7 @@ export const COMPONENTS = [
     name: 'TextArea',
     propsType: 'TextAreaProps',
     dir: 'text-area',
-    cssSources: ['shared/styles/field-control-size.module.css'],
+    cssSources: ['shared/components/field/field.module.css', 'shared/styles/field-control-size.module.css'],
   },
   { slug: 'tooltip', name: 'Tooltip', propsType: 'TooltipProps', dir: 'tooltip' },
   // Diagram components.
diff --git a/apps/docs/src/components/ui-examples/input.tsx b/apps/docs/src/components/ui-examples/input.tsx
index c0153de99..a9b09e614 100644
--- a/apps/docs/src/components/ui-examples/input.tsx
+++ b/apps/docs/src/components/ui-examples/input.tsx
@@ -5,7 +5,9 @@ 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>
@@ -15,9 +17,9 @@ export function InputExample() {
           label="Search"
           prefixIcon={<MagnifyingGlass />}
           placeholder="Large input"
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          onClear={() => setValue('')}
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          onClear={() => setSearch('')}
         />
         <Input
           size="m"
@@ -26,8 +28,8 @@ export function InputExample() {
           helperText="Enter at least three characters"
           isRequired
           placeholder="Critical input"
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
+          value={projectName}
+          onChange={(event) => setProjectName(event.target.value)}
         />
         <Input
           size="s"
@@ -35,10 +37,10 @@ export function InputExample() {
           label="Display name"
           helperText="Name is available"
           placeholder="Successful input"
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
+          value={displayName}
+          onChange={(event) => setDisplayName(event.target.value)}
         />
-        <Input label="Identifier" size="xs" state="read-only" value={value || 'Read-only 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 175405c5a..8ad7c88f8 100644
--- a/apps/docs/src/components/ui-examples/text-area.tsx
+++ b/apps/docs/src/components/ui-examples/text-area.tsx
@@ -4,7 +4,8 @@ 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>
@@ -13,9 +14,9 @@ export function TextAreaExample() {
           size="l"
           label="Description"
           placeholder="Large text area"
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          onClear={() => setValue('')}
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+          onClear={() => setDescription('')}
         />
         <TextArea
           size="m"
@@ -24,10 +25,10 @@ export function TextAreaExample() {
           helperText="A summary is required"
           isRequired
           placeholder="Critical text area"
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
+          value={summary}
+          onChange={(event) => setSummary(event.target.value)}
         />
-        <TextArea label="Notes" size="s" state="read-only" value={value || 'Read-only value'} />
+        <TextArea label="Notes" size="s" state="read-only" value="Read-only value" />
       </div>
     </ComponentPreview>
   );
diff --git a/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css b/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css
index 0f5062689..1c2718413 100644
--- a/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css
+++ b/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css
@@ -25,11 +25,6 @@
   position: relative;
 }
 
-.time-with-adornment {
-  position: relative;
-  min-width: 0;
-}
-
 .adornment--select {
   position: absolute;
   top: 50%;
@@ -45,11 +40,3 @@
   transform: translateY(-50%);
   z-index: 1;
 }
-
-.adornment--time {
-  position: absolute;
-  top: 50%;
-  right: var(--wb-space-150);
-  transform: translateY(-50%);
-  z-index: 1;
-}
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 6667816dc..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
@@ -44,7 +44,6 @@ export function DynamicTypedInput({
   const [time, setTime] = useState(getIsDateType(type) ? getTimeFromDateIfValid(value) : undefined);
   const variableTypeInfo = type ? variableTypeInfoByType[type] : undefined;
   const { t } = useTranslation();
-  const errorProps = { error: isError };
 
   const suggestionGroupsForString = useMemo(() => {
     if (!variableTypeInfo || typesForInput.includes(variableTypeInfo.type) === false) {
@@ -103,7 +102,7 @@ export function DynamicTypedInput({
     return (
       <div className={styles['container--select']}>
         <Select
-          {...errorProps}
+          error={isError}
           className={className}
           value={value}
           items={itemsForBoolean}
@@ -120,7 +119,7 @@ export function DynamicTypedInput({
     return (
       <div className={styles['date-with-reset-container']}>
         <DatePicker
-          {...errorProps}
+          error={isError}
           key={value}
           className={clsx(styles['date-picker'], className)}
           value={getDateIfValid(value)}
@@ -144,7 +143,7 @@ export function DynamicTypedInput({
     return (
       <div className={styles['row']}>
         <DatePicker
-          {...errorProps}
+          error={isError}
           key={value}
           className={clsx(styles['date-picker'], className)}
           value={date}
@@ -160,40 +159,38 @@ export function DynamicTypedInput({
           // placeholder="DD-MM-YYYY HH:mm"
           disabled={disabled}
         />
-        <div className={styles['time-with-adornment']}>
-          <Input
-            className={className}
-            value={time}
-            placeholder="HH:mm"
-            onChange={(event) => {
-              const value = (event.target.value as string).slice(0, 5);
-              if (value.length < 5) {
+        <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) {
+              setTime(value);
+
+              return;
+            }
+
+            if (value.length === 5) {
+              if (getIsValidTime(value)) {
                 setTime(value);
 
-                return;
-              }
-
-              if (value.length === 5) {
-                if (getIsValidTime(value)) {
-                  setTime(value);
-
-                  if (date && getIsValidDate(date)) {
-                    onChange(setDateWithTimeFromTime(date, value)?.toISOString());
-                  }
-                } else {
-                  setTime(timeForRawDates);
+                if (date && getIsValidDate(date)) {
+                  onChange(setDateWithTimeFromTime(date, value)?.toISOString());
+                }
+              } else {
+                setTime(timeForRawDates);
 
-                  if (date && getIsValidDate(date)) {
-                    onChange(setDateWithTimeFromTime(date, timeForRawDates)?.toISOString());
-                  }
+                if (date && getIsValidDate(date)) {
+                  onChange(setDateWithTimeFromTime(date, timeForRawDates)?.toISOString());
                 }
               }
-            }}
-            disabled={disabled || !date}
-            state={isError ? 'critical' : 'default'}
-          />
-          {endAdornment && <span className={styles['adornment--time']}>{endAdornment}</span>}
-        </div>
+            }
+          }}
+          disabled={disabled || !date}
+          state={isError ? 'critical' : 'default'}
+        />
       </div>
     );
   }
diff --git a/packages/ui/src/components/input/input-root.module.css b/packages/ui/src/components/input/input-root.module.css
index 2f8e06498..d81d6629c 100644
--- a/packages/ui/src/components/input/input-root.module.css
+++ b/packages/ui/src/components/input/input-root.module.css
@@ -45,10 +45,6 @@
     justify-content: center;
   }
 
-  .icon {
-    pointer-events: none;
-  }
-
   .icon svg,
   .clear svg {
     width: var(--wb-size-200);
diff --git a/packages/ui/src/components/input/input.tsx b/packages/ui/src/components/input/input.tsx
index ae744b68a..b2f99a9f5 100644
--- a/packages/ui/src/components/input/input.tsx
+++ b/packages/ui/src/components/input/input.tsx
@@ -7,6 +7,7 @@ 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';
 
@@ -44,15 +45,20 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       helperText={helperText}
       isRequired={isNativeRequired}
       state={fieldState}
+      disabled={disabled}
       ariaDescribedBy={ariaDescribedBy}
     >
       {({ controlId, describedBy }) => (
         <div
-          className={clsx(inputRootStyles['input-root'], inputSizeStyles[size], className)}
+          className={clsx(inputRootStyles['input-root'], inputHeightStyles[size], inputSizeStyles[size], className)}
           data-state={fieldState}
           data-disabled={disabled || undefined}
           onPointerDown={(event) => {
-            if (event.target !== event.currentTarget) return;
+            if (
+              !(event.target instanceof Element) ||
+              event.target.closest('button, a, input, select, textarea, [tabindex]')
+            )
+              return;
             event.preventDefault();
             event.currentTarget.querySelector('input')?.focus();
           }}
diff --git a/packages/ui/src/components/number-field/number-field.module.css b/packages/ui/src/components/number-field/number-field.module.css
index a52c46e54..9256f4254 100644
--- a/packages/ui/src/components/number-field/number-field.module.css
+++ b/packages/ui/src/components/number-field/number-field.module.css
@@ -2,6 +2,7 @@
   .number-field {
     display: flex;
     min-width: 0;
+    width: 100%;
     align-items: center;
     overflow: hidden;
     background-color: var(--ax-public-number-field-root-background-color);
@@ -9,21 +10,21 @@
     color: var(--ax-public-number-field-root-icon-color);
     cursor: text;
 
-    &[data-field-state='default']:not([data-field-disabled]):not(:focus-within):hover {
+    &[data-state='default']:not([data-field-disabled]):not(:focus-within):hover {
       border-color: var(--ax-public-number-field-root-border-color-hover);
     }
 
-    &[data-field-state='critical']:not([data-field-disabled]) {
+    &[data-state='critical']:not([data-field-disabled]) {
       background-color: var(--ax-public-number-field-root-background-color-critical);
       border-color: var(--ax-public-number-field-root-border-color-critical);
     }
 
-    &[data-field-state='success']:not([data-field-disabled]) {
+    &[data-state='success']:not([data-field-disabled]) {
       background-color: var(--ax-public-number-field-root-background-color-success);
       border-color: var(--ax-public-number-field-root-border-color-success);
     }
 
-    &[data-field-state='read-only']:not([data-field-disabled]),
+    &[data-state='read-only']:not([data-field-disabled]),
     &[data-field-disabled] {
       background-color: var(--ax-public-number-field-root-background-color-disabled);
       border-color: var(--ax-public-number-field-root-border-color);
@@ -87,10 +88,6 @@
     justify-content: center;
   }
 
-  .icon {
-    pointer-events: none;
-  }
-
   .icon svg,
   .clear svg {
     width: var(--wb-size-200);
diff --git a/packages/ui/src/components/number-field/number-field.spec.tsx b/packages/ui/src/components/number-field/number-field.spec.tsx
index d52b1e665..8a5ca766d 100644
--- a/packages/ui/src/components/number-field/number-field.spec.tsx
+++ b/packages/ui/src/components/number-field/number-field.spec.tsx
@@ -1,4 +1,4 @@
-import { act, createRef } from 'react';
+import { act, createRef, useState } from 'react';
 import { type Root, createRoot } from 'react-dom/client';
 
 import { NumberField } from './number-field';
@@ -98,25 +98,64 @@ it('keeps the read-only input focusable and copyable', () => {
 });
 
 it('lets disabled behavior take precedence over read-only state', () => {
-  act(() => root.render(<NumberField aria-label="Quantity" disabled state="read-only" />));
+  act(() => root.render(<NumberField aria-label="Quantity" className="layout-class" disabled state="read-only" />));
 
   const input = getVisibleInput();
+  const group = input.closest('[data-state]');
+  const fieldRoot = container.querySelector('.layout-class');
   expect(input.disabled).toBe(true);
   expect(input.readOnly).toBe(false);
-  expect(input.closest('[data-field-state]')?.getAttribute('data-field-state')).toBe('default');
+  expect(group?.getAttribute('data-state')).toBe('default');
+  expect(fieldRoot).not.toBe(group);
+  expect(fieldRoot?.contains(group)).toBe(true);
 });
 
-it('renders an accessible clear affordance', () => {
+it('clears an uncontrolled value while the input is focused', () => {
   const onClear = vi.fn();
+  const changes: Array<{ value: number | null; reason: string }> = [];
 
-  act(() => root.render(<NumberField aria-label="Quantity" onClear={onClear} />));
+  act(() =>
+    root.render(
+      <NumberField
+        aria-label="Quantity"
+        defaultValue={3}
+        onClear={onClear}
+        onValueChange={(value, details) => changes.push({ value, reason: details.reason })}
+      />,
+    ),
+  );
 
+  const input = getVisibleInput();
   const clearButton = container.querySelector<HTMLButtonElement>('button[aria-label="Clear number field"]');
   expect(clearButton).not.toBeNull();
 
+  act(() => input.focus());
+  changeInputValue(input, '4');
   act(() => clearButton?.click());
 
+  expect(input.value).toBe('');
+  expect(container.querySelector<HTMLInputElement>('input[type="number"]')?.value).toBe('');
+  expect(document.activeElement).toBe(input);
   expect(onClear).toHaveBeenCalledOnce();
+  expect(changes.at(-1)).toEqual({ value: null, reason: 'input-clear' });
+});
+
+it('clears a controlled value while the input is focused', () => {
+  function ControlledNumberField() {
+    const [value, setValue] = useState<number | null>(3);
+    return <NumberField aria-label="Quantity" value={value} onValueChange={setValue} onClear={() => setValue(null)} />;
+  }
+
+  act(() => root.render(<ControlledNumberField />));
+
+  const input = getVisibleInput();
+  act(() => input.focus());
+  changeInputValue(input, '4');
+  act(() => container.querySelector<HTMLButtonElement>('button[aria-label="Clear number field"]')?.click());
+
+  expect(input.value).toBe('');
+  expect(container.querySelector<HTMLInputElement>('input[type="number"]')?.value).toBe('');
+  expect(document.activeElement).toBe(input);
 });
 
 it('reports clearing as a nullable value with change details', () => {
@@ -136,89 +175,91 @@ it('reports clearing as a nullable value with change details', () => {
   expect(changes).toEqual([{ value: null, reason: 'input-clear' }]);
 });
 
-it('emits a clamped typed value only once after blur', () => {
+it('stops incrementing at the largest on-grid value below max', () => {
   const values: Array<number | null> = [];
   act(() =>
     root.render(
-      <NumberField aria-label="Quantity" defaultValue={1} max={10} onValueChange={(value) => values.push(value)} />,
+      <form>
+        <NumberField
+          name="quantity"
+          defaultValue={6}
+          min={0}
+          max={10}
+          step={3}
+          onValueChange={(value) => values.push(value)}
+        />
+      </form>,
     ),
   );
 
-  const input = getVisibleInput();
-  act(() => input.focus());
-  changeInputValue(input, '11');
-  act(() => input.blur());
+  const increment = container.querySelector<HTMLButtonElement>('button[aria-label="Increment value"]');
+  act(() => increment?.click());
+  act(() => increment?.click());
 
-  expect(values).toEqual([10]);
+  const form = container.querySelector('form');
+  const nativeInput = container.querySelector<HTMLInputElement>('input[type="number"]');
+  expect(values).toEqual([9]);
+  expect(nativeInput?.value).toBe('9');
+  expect(nativeInput?.max).toBe('10');
+  expect(nativeInput?.step).toBe('3');
+  expect(nativeInput?.validity.stepMismatch).toBe(false);
+  expect(form?.checkValidity()).toBe(true);
 });
 
-it('resynchronizes a controlled value when its parent refuses an update', () => {
+it('typed off-grid value reports stepMismatch', () => {
   const values: Array<number | null> = [];
-  act(() => root.render(<NumberField aria-label="Quantity" value={1} onValueChange={(value) => values.push(value)} />));
-
-  const input = getVisibleInput();
-  act(() => input.focus());
-  changeInputValue(input, '2');
-
-  expect(getVisibleInput().value).toBe('1');
+  act(() =>
+    root.render(
+      <form>
+        <NumberField name="quantity" min={0} max={10} step={3} onValueChange={(value) => values.push(value)} />
+      </form>,
+    ),
+  );
 
-  pressKey(getVisibleInput(), 'ArrowUp');
+  const visibleInput = getVisibleInput();
+  changeInputValue(visibleInput, '10');
 
-  expect(values).toEqual([2, 2]);
-  expect(getVisibleInput().value).toBe('1');
+  const form = container.querySelector('form');
+  const nativeInput = container.querySelector<HTMLInputElement>('input[type="number"]');
+  expect(values).toEqual([10]);
+  expect(visibleInput.value).toBe('10');
+  expect(nativeInput?.value).toBe('10');
+  expect(nativeInput?.step).toBe('3');
+  expect(nativeInput?.validity.stepMismatch).toBe(true);
+  expect(form?.checkValidity()).toBe(false);
 });
 
-it('honors a controlled cancellation without leaving dirty text', () => {
-  const reasons: string[] = [];
+it('keeps a large off-grid max out of the step sequence', () => {
+  const min = 1_000_000_000_000_000;
+  const values: Array<number | null> = [];
   act(() =>
     root.render(
       <NumberField
         aria-label="Quantity"
-        value={1}
-        onValueChange={(_value, details) => {
-          reasons.push(details.reason);
-          details.cancel();
-        }}
+        defaultValue={min + 6}
+        min={min}
+        max={min + 10}
+        step={3}
+        onValueChange={(value) => values.push(value)}
       />,
     ),
   );
 
-  const input = getVisibleInput();
-  act(() => input.focus());
-  changeInputValue(input, '2');
+  const increment = container.querySelector<HTMLButtonElement>('button[aria-label="Increment value"]');
+  act(() => increment?.click());
+  act(() => increment?.click());
 
-  expect(reasons).toEqual(['input-change']);
-  expect(getVisibleInput().value).toBe('1');
-  expect(document.activeElement).toBe(getVisibleInput());
+  expect(values).toEqual([min + 9]);
 });
 
-it('keeps an off-grid clamped boundary valid for form submission', () => {
-  const values: Array<number | null> = [];
-  act(() =>
-    root.render(
-      <form>
-        <NumberField
-          name="quantity"
-          defaultValue={9}
-          min={0}
-          max={10}
-          step={3}
-          onValueChange={(value) => values.push(value)}
-        />
-      </form>,
-    ),
-  );
+it('disables increment at a fractional on-grid boundary', () => {
+  act(() => root.render(<NumberField aria-label="Quantity" defaultValue={0.2} min={0} max={0.31} step={0.1} />));
 
   const increment = container.querySelector<HTMLButtonElement>('button[aria-label="Increment value"]');
   act(() => increment?.click());
 
-  const form = container.querySelector('form');
-  const nativeInput = container.querySelector<HTMLInputElement>('input[type="number"]');
-  expect(values).toEqual([10]);
-  expect(nativeInput?.value).toBe('10');
-  expect(nativeInput?.step).toBe('any');
-  expect(nativeInput?.validity.stepMismatch).toBe(false);
-  expect(form?.checkValidity()).toBe(true);
+  expect(container.querySelector<HTMLInputElement>('input[type="number"]')?.value).toBe('0.3');
+  expect(increment?.disabled).toBe(true);
 });
 
 it('normalizes non-finite numeric props and never emits NaN', () => {
@@ -320,4 +361,5 @@ it('associates its label and critical helper with the input', () => {
   expect(input.required).toBe(true);
   expect(input.getAttribute('aria-invalid')).toBe('true');
   expect(input.getAttribute('aria-describedby')?.split(' ')).toEqual(['external-description', helper?.id]);
+  expect(helper?.getAttribute('role')).toBe('alert');
 });
diff --git a/packages/ui/src/components/number-field/number-field.tsx b/packages/ui/src/components/number-field/number-field.tsx
index 1cd498f13..cc967c588 100644
--- a/packages/ui/src/components/number-field/number-field.tsx
+++ b/packages/ui/src/components/number-field/number-field.tsx
@@ -2,74 +2,23 @@ import { NumberField as NumberFieldBase } from '@base-ui/react/number-field';
 import { CaretDown, CaretUp, X } from '@phosphor-icons/react';
 import { Field } from '@ui/shared/components/field/field';
 import clsx from 'clsx';
-import {
-  type ClipboardEvent,
-  type ForwardedRef,
-  forwardRef,
-  useCallback,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 
 import styles from './number-field.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 {
+  clearNumberInput,
+  getSteppingMax,
+  handleNumberPaste,
+  normalizeFinite,
+  normalizeStep,
+} from './number-field.utils';
 import type { NumberFieldProps } from './types';
 
-const NUMERAL_PATTERN = /^[\p{N}零〇一二三四五六七八九]+$/u;
-const SIGN_PATTERN = /[+＋﹢\-−－‒–—﹣]/u;
-
-function normalizeFinite(value: number | undefined) {
-  return value === undefined || !Number.isFinite(value) ? undefined : value;
-}
-
-function normalizeStep(step: number | 'any') {
-  return step === 'any' || (Number.isFinite(step) && step > 0) ? step : 1;
-}
-
-function isValidPastedNumber(value: string) {
-  let input = value.trim();
-  if (!input) return false;
-
-  const parts = new Intl.NumberFormat().formatToParts(12_345.6);
-  const decimal = parts.find((part) => part.type === 'decimal')?.value ?? '.';
-  const group = parts.find((part) => part.type === 'group')?.value;
-  const characters = [...input];
-  const firstIsSign = SIGN_PATTERN.test(characters[0] ?? '');
-  const lastIsSign = SIGN_PATTERN.test(characters.at(-1) ?? '');
-
-  if (firstIsSign && lastIsSign && characters.length > 1) return false;
-  if (firstIsSign) input = characters.slice(1).join('');
-  if (lastIsSign) input = characters.slice(0, -1).join('');
-  if (SIGN_PATTERN.test(input)) return false;
-
-  const decimalParts = input.split(decimal);
-  if (decimalParts.length > 2) return false;
-
-  const [integer, fraction] = decimalParts;
-  if (fraction !== undefined && fraction !== '' && !NUMERAL_PATTERN.test(fraction)) return false;
-  if (!integer && !fraction) return false;
-
-  if (!integer) return true;
-  if (!group || !integer.includes(group)) return NUMERAL_PATTERN.test(integer);
-
-  const groups = integer.split(group);
-  return (
-    groups.length > 1 &&
-    groups[0].length > 0 &&
-    groups[0].length <= 3 &&
-    groups.every((part, index) => NUMERAL_PATTERN.test(part) && (index === 0 || part.length === 3))
-  );
-}
-
-function setRef(ref: ForwardedRef<HTMLInputElement>, value: HTMLInputElement | null) {
-  if (typeof ref === 'function') ref(value);
-  else if (ref) ref.current = value;
-}
-
 export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(
   {
     value,
@@ -100,124 +49,59 @@ export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(functi
   },
   ref,
 ) {
-  const normalizedValue = value == null || Number.isFinite(value) ? value : null;
-  const normalizedDefaultValue = defaultValue == null ? undefined : normalizeFinite(defaultValue);
-  const normalizedMin = normalizeFinite(min);
-  const normalizedMax = normalizeFinite(max);
+  const [normalizedMin, normalizedMax] = [normalizeFinite(min), normalizeFinite(max)];
   const normalizedStep = normalizeStep(step);
+  const steppingMax = getSteppingMax(normalizedMin, normalizedMax, normalizedStep);
   const isReadOnly = !disabled && (state === 'read-only' || readOnly === true);
   const fieldState = disabled && state === 'read-only' ? 'default' : isReadOnly ? 'read-only' : state;
-  const isNativeRequired = required || isRequired;
   const visibleInputRef = useRef<HTMLInputElement | null>(null);
-  const restoreFocusRef = useRef(false);
-  const lastReportedValueRef = useRef<number | null | undefined>(undefined);
-  const pendingControlledValueRef = useRef<number | null | undefined>(undefined);
-  const [resetVersion, setResetVersion] = useState(0);
-  const [proposalVersion, setProposalVersion] = useState(0);
-  const isControlled = value !== undefined;
-  const maxIsOffStep =
-    typeof normalizedStep === 'number' &&
-    normalizedMax !== undefined &&
-    Math.abs(
-      (normalizedMax - (normalizedMin ?? 0)) / normalizedStep -
-        Math.round((normalizedMax - (normalizedMin ?? 0)) / normalizedStep),
-    ) > 1e-10;
-  const setVisibleInputRef = useCallback(
-    (element: HTMLInputElement | null) => {
-      visibleInputRef.current = element;
-      setRef(ref, element);
-    },
-    [ref],
-  );
-  const setHiddenInputRef = useCallback(
-    (element: HTMLInputElement | null) => {
-      if (element) element.step = maxIsOffStep || normalizedStep === 'any' ? 'any' : String(normalizedStep);
-    },
-    [maxIsOffStep, normalizedStep],
-  );
-
-  useLayoutEffect(() => {
-    if (pendingControlledValueRef.current === undefined) return;
-
-    const proposedValue = pendingControlledValueRef.current;
-    pendingControlledValueRef.current = undefined;
-    if (!Object.is(normalizedValue, proposedValue)) setResetVersion((current) => current + 1);
-  }, [normalizedValue, proposalVersion]);
-
-  useLayoutEffect(() => {
-    if (!restoreFocusRef.current) return;
-
-    restoreFocusRef.current = false;
-    visibleInputRef.current?.focus();
-  }, [resetVersion]);
-
-  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
-    onPaste?.(event);
-    if (event.defaultPrevented) return;
-
-    const pastedText = event.clipboardData.getData('text/plain');
-    const selectionStart = event.currentTarget.selectionStart ?? event.currentTarget.value.length;
-    const selectionEnd = event.currentTarget.selectionEnd ?? selectionStart;
-    const nextText =
-      event.currentTarget.value.slice(0, selectionStart) + pastedText + event.currentTarget.value.slice(selectionEnd);
-
-    if (!isValidPastedNumber(nextText)) event.preventDefault();
-  };
+  useImperativeHandle(ref, () => visibleInputRef.current as HTMLInputElement);
 
   return (
     <Field
       id={id}
       label={label}
       helperText={helperText}
-      isRequired={isNativeRequired}
+      isRequired={required || isRequired}
       state={fieldState}
+      disabled={disabled}
       ariaDescribedBy={ariaDescribedBy}
     >
       {({ controlId, describedBy }) => (
         <NumberFieldBase.Root
-          key={resetVersion}
-          value={normalizedValue}
-          defaultValue={normalizedDefaultValue}
+          className={className}
+          value={value == null || Number.isFinite(value) ? value : null}
+          defaultValue={defaultValue == null ? undefined : normalizeFinite(defaultValue)}
           min={normalizedMin}
-          max={normalizedMax}
+          max={steppingMax}
+          allowOutOfRange={steppingMax !== normalizedMax}
           step={normalizedStep}
+          snapOnStep={normalizedStep !== 'any'}
           disabled={disabled}
           readOnly={isReadOnly}
           id={controlId}
           name={name}
           form={form}
-          required={isNativeRequired}
-          inputRef={setHiddenInputRef}
-          onValueChange={(nextValue, details) => {
-            if (nextValue !== null && !Number.isFinite(nextValue)) {
-              details.cancel();
-              return;
-            }
-            if (details.reason === 'input-blur' && Object.is(lastReportedValueRef.current, nextValue)) return;
-
-            onValueChange?.(nextValue, details);
-            if (details.isCanceled) {
-              if (isControlled) {
-                restoreFocusRef.current = document.activeElement === visibleInputRef.current;
-                setResetVersion((current) => current + 1);
-              }
-              return;
-            }
-
-            lastReportedValueRef.current = nextValue;
-            if (isControlled) {
-              pendingControlledValueRef.current = nextValue;
-              restoreFocusRef.current = document.activeElement === visibleInputRef.current;
-              setProposalVersion((current) => current + 1);
-            }
+          required={required || isRequired}
+          inputRef={(element) => {
+            if (!element) return;
+            if (normalizedMax === undefined) element.removeAttribute('max');
+            else element.max = String(normalizedMax);
           }}
+          onValueChange={(nextValue, details) =>
+            onValueChange?.(nextValue === null || Number.isFinite(nextValue) ? nextValue : null, details)
+          }
         >
           <NumberFieldBase.Group
-            className={clsx(styles['number-field'], styles[size], inputSizeStyles[size], className)}
-            data-field-state={fieldState}
+            className={clsx(styles['number-field'], styles[size], inputHeightStyles[size], inputSizeStyles[size])}
+            data-state={fieldState}
             data-field-disabled={disabled || undefined}
             onPointerDown={(event) => {
-              if (event.target !== event.currentTarget) return;
+              if (
+                !(event.target instanceof Element) ||
+                event.target.closest('button, a, input, select, textarea, [tabindex]')
+              )
+                return;
               event.preventDefault();
               event.currentTarget.querySelector('input')?.focus();
             }}
@@ -225,8 +109,8 @@ export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(functi
             {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>}
             <NumberFieldBase.Input
               {...props}
-              ref={setVisibleInputRef}
-              onPaste={handlePaste}
+              ref={visibleInputRef}
+              onPaste={(event) => handleNumberPaste(event, onPaste)}
               aria-describedby={describedBy}
               aria-invalid={fieldState === 'critical' ? true : ariaInvalid}
               className={clsx(styles['input'], inputFontStyles[size])}
@@ -239,7 +123,10 @@ export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(functi
                 aria-label="Clear number field"
                 disabled={disabled || isReadOnly}
                 onPointerDown={(event) => event.preventDefault()}
-                onClick={onClear}
+                onClick={() => {
+                  clearNumberInput(visibleInputRef.current);
+                  onClear();
+                }}
               >
                 <X />
               </button>
diff --git a/packages/ui/src/components/number-field/number-field.utils.ts b/packages/ui/src/components/number-field/number-field.utils.ts
new file mode 100644
index 000000000..697e49fe2
--- /dev/null
+++ b/packages/ui/src/components/number-field/number-field.utils.ts
@@ -0,0 +1,71 @@
+import type { ClipboardEventHandler, ClipboardEvent as ReactClipboardEvent } from 'react';
+
+const HAN_NUMERALS = '零〇一二三四五六七八九';
+
+export function normalizeFinite(value: number | undefined) {
+  return value === undefined || !Number.isFinite(value) ? undefined : value;
+}
+
+export function normalizeStep(step: number | 'any') {
+  return step === 'any' || (Number.isFinite(step) && step > 0) ? step : 1;
+}
+
+function decimalPlaces(value: number) {
+  const [coefficient, exponent = '0'] = value.toString().split('e');
+  const fractionLength = coefficient.split('.')[1]?.length ?? 0;
+  return Math.max(0, fractionLength - Number(exponent));
+}
+
+export function getSteppingMax(min: number | undefined, max: number | undefined, step: number | 'any') {
+  if (max === undefined || step === 'any') return max;
+
+  const base = min ?? 0;
+  const stepCount = Math.floor((max - base) / step + 1e-10);
+  const precision = Math.min(15, Math.max(decimalPlaces(base), decimalPlaces(step)));
+  return Math.min(max, Number((base + stepCount * step).toFixed(precision)));
+}
+
+export function parsePastedNumber(value: string) {
+  const parts = new Intl.NumberFormat().formatToParts(12_345.6);
+  const group = parts.find((part) => part.type === 'group')?.value;
+  const decimal = parts.find((part) => part.type === 'decimal')?.value ?? '.';
+  let normalized = value
+    .replaceAll(/\p{Cf}/gu, '')
+    .trim()
+    .replaceAll(/[−－‒–—﹣]/g, '-')
+    .replaceAll(/[＋﹢]/g, '+');
+  normalized = normalized.replaceAll(/[٠-٩۰-۹０-９]/g, (digit) => String((digit.codePointAt(0) ?? 0) % 16));
+  normalized = normalized.replaceAll(/[零〇一二三四五六七八九]/g, (digit) =>
+    String(Math.max(HAN_NUMERALS.indexOf(digit) - 1, 0)),
+  );
+  if (group) normalized = normalized.split(group).join('');
+  normalized = normalized.split(decimal).join('.').replaceAll(/[．٫]/g, '.').replaceAll(/[，٬]/g, '');
+  if (!/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(normalized)) return null;
+
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+export function handleNumberPaste(
+  event: ReactClipboardEvent<HTMLInputElement>,
+  onPaste: ClipboardEventHandler<HTMLInputElement> | undefined,
+) {
+  onPaste?.(event);
+  if (event.defaultPrevented) return;
+
+  const start = event.currentTarget.selectionStart ?? event.currentTarget.value.length;
+  const end = event.currentTarget.selectionEnd ?? start;
+  const pasted = event.clipboardData.getData('text/plain');
+  const nextText = event.currentTarget.value.slice(0, start) + pasted + event.currentTarget.value.slice(end);
+  if (parsePastedNumber(nextText) === null) event.preventDefault();
+}
+
+export function clearNumberInput(input: HTMLInputElement | null) {
+  if (!input) return;
+
+  const prototype = input.ownerDocument.defaultView?.HTMLInputElement.prototype;
+  const setter = prototype && Object.getOwnPropertyDescriptor(prototype, 'value')?.set;
+  if (setter) setter.call(input, '');
+  else input.value = '';
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+}
diff --git a/packages/ui/src/components/number-field/types.ts b/packages/ui/src/components/number-field/types.ts
index 4b59599ea..051ac5898 100644
--- a/packages/ui/src/components/number-field/types.ts
+++ b/packages/ui/src/components/number-field/types.ts
@@ -2,6 +2,9 @@ import type { NumberFieldRootChangeEventDetails } from '@base-ui/react/number-fi
 import type { FieldControlProps } from '@ui/shared/types/field';
 import type { InputHTMLAttributes } from 'react';
 
+/**
+ * Uses the runtime locale with decimal formatting. Explicit locale and format options are reserved for a future API.
+ */
 export type NumberFieldProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
   'defaultValue' | 'max' | 'min' | 'size' | 'step' | 'type' | 'value'
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 0ad674a2f..a1aedeebd 100644
--- a/packages/ui/src/components/text-area/text-area.module.css
+++ b/packages/ui/src/components/text-area/text-area.module.css
@@ -21,7 +21,6 @@
     display: flex;
     min-width: 0;
     width: 100%;
-    height: auto;
     align-items: flex-start;
     background-color: var(--ax-public-textarea-root-background-color);
     color: var(--ax-public-textarea-root-icon-color);
@@ -57,10 +56,6 @@
     }
   }
 
-  .text-area-container.text-area-container {
-    height: auto;
-  }
-
   .size-l {
     min-height: calc(var(--wb-size-800) + var(--wb-size-700));
   }
@@ -107,10 +102,6 @@
     justify-content: center;
   }
 
-  .icon {
-    pointer-events: none;
-  }
-
   .icon svg,
   .clear svg {
     width: var(--wb-size-200);
diff --git a/packages/ui/src/components/text-area/text-area.tsx b/packages/ui/src/components/text-area/text-area.tsx
index f0250341c..fe0237dc9 100644
--- a/packages/ui/src/components/text-area/text-area.tsx
+++ b/packages/ui/src/components/text-area/text-area.tsx
@@ -1,6 +1,6 @@
 import { X } from '@phosphor-icons/react';
 import { Field } from '@ui/shared/components/field/field';
-import type { FieldControlProps } from '@ui/shared/types/field';
+import type { FieldControlProps, FieldSize } from '@ui/shared/types/field';
 import clsx from 'clsx';
 import { type ComponentPropsWithoutRef, type TextareaHTMLAttributes, forwardRef } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
@@ -9,12 +9,13 @@ 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';
 
-export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style'> &
-  FieldControlProps & {
-    maxRows?: number;
-    minRows?: number;
-    style?: ComponentPropsWithoutRef<typeof TextareaAutosize>['style'];
-  };
+export type TextAreaProps = {
+  maxRows?: number;
+  minRows?: number;
+  size?: Exclude<FieldSize, 'xs'>;
+  style?: ComponentPropsWithoutRef<typeof TextareaAutosize>['style'];
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style'> &
+  FieldControlProps;
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
   {
@@ -50,6 +51,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       helperText={helperText}
       isRequired={isNativeRequired}
       state={fieldState}
+      disabled={disabled}
       ariaDescribedBy={ariaDescribedBy}
     >
       {({ controlId, describedBy }) => (
@@ -58,7 +60,11 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
           data-state={fieldState}
           data-disabled={disabled || undefined}
           onPointerDown={(event) => {
-            if (event.target !== event.currentTarget) return;
+            if (
+              !(event.target instanceof Element) ||
+              event.target.closest('button, a, input, select, textarea, [tabindex]')
+            )
+              return;
             event.preventDefault();
             event.currentTarget.querySelector('textarea')?.focus();
           }}
diff --git a/packages/ui/src/shared/components/field/field.module.css b/packages/ui/src/shared/components/field/field.module.css
index e50199b48..a98b94b35 100644
--- a/packages/ui/src/shared/components/field/field.module.css
+++ b/packages/ui/src/shared/components/field/field.module.css
@@ -1,35 +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(--wb-space-75);
+    gap: var(--ax-public-field-gap);
   }
 
   .label,
   .helper {
     display: flex;
-    height: var(--wb-size-200);
-    align-items: center;
-    font-size: var(--wb-font-size-150);
-    font-weight: 400;
-    line-height: var(--wb-size-200);
+    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(--wb-ui-text-default);
+    color: var(--ax-public-field-label-color);
   }
 
   .required {
-    color: var(--wb-components-text-field-stroke-critical);
+    color: var(--ax-public-field-critical-color);
   }
 
   .helper {
-    color: var(--wb-ui-text-subtle-default);
+    color: var(--ax-public-field-helper-color);
+  }
+
+  .field[data-state='critical']:not([data-disabled]) .helper {
+    color: var(--ax-public-field-critical-color);
   }
 
-  .field[data-state='critical'] .helper {
-    color: var(--wb-components-text-field-stroke-critical);
+  .field[data-disabled] :is(.label, .helper, .required) {
+    color: var(--ax-public-field-color-disabled);
   }
 }
diff --git a/packages/ui/src/shared/components/field/field.tsx b/packages/ui/src/shared/components/field/field.tsx
index fc6aa46e7..c7676cec4 100644
--- a/packages/ui/src/shared/components/field/field.tsx
+++ b/packages/ui/src/shared/components/field/field.tsx
@@ -12,6 +12,7 @@ type FieldRenderProps = {
 type FieldProps = {
   ariaDescribedBy?: string;
   children: (props: FieldRenderProps) => ReactNode;
+  disabled?: boolean;
   helperText?: ReactNode;
   id?: string;
   isRequired?: boolean;
@@ -19,20 +20,20 @@ type FieldProps = {
   state: FieldState;
 };
 
-export function Field({ ariaDescribedBy, children, helperText, id, isRequired, label, state }: FieldProps) {
+export function Field({ ariaDescribedBy, children, disabled, helperText, id, isRequired, label, state }: FieldProps) {
   const generatedId = useId();
   const hasLabel = label !== undefined && label !== null;
   const hasHelper = helperText !== undefined && helperText !== null;
   const isComposed = hasLabel || hasHelper;
   const controlId = id ?? (isComposed ? generatedId : undefined);
-  const helperId = hasHelper ? `${controlId ?? generatedId}-helper` : undefined;
+  const helperId = hasHelper ? `${controlId}-helper` : undefined;
   const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;
   const control = children({ controlId, describedBy });
 
   if (!isComposed) return control;
 
   return (
-    <div className={styles['field']} data-state={state}>
+    <div className={styles['field']} data-state={state} data-disabled={disabled || undefined}>
       {hasLabel && (
         <label className={styles['label']} htmlFor={controlId}>
           {label}
@@ -45,7 +46,7 @@ export function Field({ ariaDescribedBy, children, helperText, id, isRequired, l
       )}
       {control}
       {hasHelper && (
-        <span className={styles['helper']} id={helperId}>
+        <span className={styles['helper']} id={helperId} role={state === 'critical' ? 'alert' : undefined}>
           {helperText}
         </span>
       )}
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
index 59f0cefa3..013d566a2 100644
--- a/packages/ui/src/shared/styles/field-control-size.module.css
+++ b/packages/ui/src/shared/styles/field-control-size.module.css
@@ -1,9 +1,4 @@
 :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));
-
   --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);
@@ -22,28 +17,24 @@
 
 @layer ui.component {
   .l {
-    height: var(--ax-public-input-height-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 {
-    height: var(--ax-public-input-height-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 {
-    height: var(--ax-public-input-height-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 {
-    height: var(--ax-public-input-height-xs);
     padding: var(--ax-public-input-padding-xs);
     border-radius: var(--ax-public-input-border-radius-xs);
     gap: var(--ax-public-input-gap-xs);