diff --git a/.changeset/form-fields-redesign.md b/.changeset/form-fields-redesign.md
new file mode 100644
index 000000000..80716dc62
--- /dev/null
+++ b/.changeset/form-fields-redesign.md
@@ -0,0 +1,6 @@
+---
+'@workflowbuilder/ui': major
+'@workflowbuilder/sdk': minor
+---
+
+Input and TextArea now use `state` instead of `error`, letter-based sizes, `prefixIcon`/`suffixIcon` instead of `startAdornment`/`endAdornment`, and an optional clear action. 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 8abe83075..ec3f49a6a 100644
--- a/apps/docs/scripts/ui-components.mjs
+++ b/apps/docs/scripts/ui-components.mjs
@@ -18,9 +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',
+    cssSources: ['shared/styles/field-control-size.module.css'],
+  },
   {
     slug: 'nav-button',
     name: 'NavButton',
@@ -39,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 f1d4cc4b2..c0153de99 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,37 @@ 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"
+          label="Search"
+          prefixIcon={<MagnifyingGlass />}
+          placeholder="Large input"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          onClear={() => setValue('')}
+        />
+        <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)}
+        />
+        <Input
+          size="s"
+          state="success"
+          label="Display name"
+          helperText="Name is available"
+          placeholder="Successful input"
+          value={value}
+          onChange={(event) => setValue(event.target.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
new file mode 100644
index 000000000..fa82f2746
--- /dev/null
+++ b/apps/docs/src/components/ui-examples/number-field.tsx
@@ -0,0 +1,22 @@
+import { NumberField } from '@workflowbuilder/ui';
+import { useState } from 'react';
+
+import { ComponentPreview } from './component-preview';
+
+export function NumberFieldExample() {
+  const [value, setValue] = useState<number | null>(3);
+
+  return (
+    <ComponentPreview>
+      <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 d0d45749d..175405c5a 100644
--- a/apps/docs/src/components/ui-examples/text-area.tsx
+++ b/apps/docs/src/components/ui-examples/text-area.tsx
@@ -8,7 +8,27 @@ 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"
+          label="Description"
+          placeholder="Large text area"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          onClear={() => setValue('')}
+        />
+        <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 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/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..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
@@ -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,21 @@ import { useState } from 'react';
 
 function Example() {
   const [value, setValue] = useState('');
-  return <Input placeholder="Type something" value={value} onChange={(event) => setValue(event.target.value)} />;
+  const hasError = value.length > 0 && value.length < 3;
+
+  return (
+    <Input
+      size="m"
+      state={hasError ? 'critical' : 'default'}
+      label="Project name"
+      helperText={hasError ? 'Enter at least three characters' : 'Shown throughout the workspace'}
+      isRequired
+      placeholder="Type something"
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      onClear={() => setValue('')}
+    />
+  );
 }
 ```
 
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..a2e1222a4
--- /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<number | null>(3);
+
+  return <NumberField 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..11c5c4d95 100644
--- a/apps/docs/src/content/docs/ui-library/ui-components/text-area.mdx
+++ b/apps/docs/src/content/docs/ui-library/ui-components/text-area.mdx
@@ -8,8 +8,8 @@ import PropsTable from '../../../../components/api/props-table.astro';
 import { TextAreaExample } from '../../../../components/ui-examples/text-area';
 
 A `TextArea` is a multi-line text field for longer, free-form input. It
-auto-resizes to fit its content and supports row limits, an error state, and the
-standard input sizes.
+auto-resizes to fit its content and supports row limits, letter sizes, icon
+slots, a clear affordance, and explicit validation and read-only states.
 
 <TextAreaExample client:visible />
 
@@ -21,7 +21,17 @@ import { useState } from 'react';
 
 function Example() {
   const [value, setValue] = useState('');
-  return <TextArea placeholder="Multi-line input" value={value} onChange={(event) => setValue(event.target.value)} />;
+  return (
+    <TextArea
+      size="m"
+      state={value ? 'success' : 'default'}
+      label="Description"
+      helperText="Explain what this workflow does"
+      placeholder="Multi-line input"
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+    />
+  );
 }
 ```
 
diff --git a/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx b/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx
index 4b214092f..f7b5f293f 100644
--- a/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx
@@ -34,7 +34,7 @@ function TextAreaControl(props: TextAreaControlProps) {
         placeholder={placeholder}
         onChange={onChange}
         onBlur={onBlur}
-        size="medium"
+        size="m"
       />
     </ControlWrapper>
   );
diff --git a/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx b/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx
index 5c2c4e9e4..f1d4aec4f 100644
--- a/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx
@@ -51,7 +51,7 @@ function TextControl(props: TextControlProps) {
         value={inputValue}
         onChange={onChange}
         onBlur={onBlur}
-        error={hasErrors}
+        state={hasErrors ? 'critical' : 'default'}
         disabled={isDisabled}
         placeholder={placeholder}
       />
diff --git a/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.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 36fd873ff..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
@@ -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,40 +159,41 @@ export function DynamicTypedInput({
           // valueFormat="DD-MM-YYYY HH:mm"
           // placeholder="DD-MM-YYYY HH:mm"
           disabled={disabled}
-          error={isError}
         />
-        <Input
-          className={className}
-          value={time}
-          placeholder="HH:mm"
-          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}
-          error={isError}
-          endAdornment={endAdornment}
-        />
+            }}
+            disabled={disabled || !date}
+            state={isError ? 'critical' : 'default'}
+          />
+          {endAdornment && <span className={styles['adornment--time']}>{endAdornment}</span>}
+        </div>
       </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..2f8e06498 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;
+    background-color: var(--ax-public-input-root-background-color);
+    border: var(--ax-public-input-root-border-size) solid var(--ax-public-input-root-border-color);
+    color: var(--ax-public-input-root-icon-color);
 
-    color: var(--ax-public-input-root-color);
+    &[data-state='default']:not([data-disabled]):not(:focus-within):hover {
+      border-color: var(--ax-public-input-root-border-color-hover);
+    }
 
-    border: var(--ax-public-input-root-border-size) solid var(--ax-public-input-root-border-color);
+    &[data-state='critical']:not([data-disabled]) {
+      background-color: var(--ax-public-input-root-background-color-critical);
+      border-color: var(--ax-public-input-root-border-color-critical);
+    }
+
+    &[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);
+    }
 
-    &:not(:hover) {
-      transition: all var(--ax-public-transition);
+    &[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);
     }
 
-    &:has(input:focus-visible) {
+    &[data-disabled] {
+      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);
     }
+  }
 
-    &:global(.base--error) {
-      background-color: var(--ax-public-input-root-background-color-error);
-      border-color: var(--ax-public-input-root-border-color-error);
-      color: var(--ax-public-input-root-color-error);
+  .icon,
+  .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);
     }
 
-    &:global(.base--disabled) {
-      color: var(--ax-public-input-root-color-disabled);
+    &:focus-visible {
+      border-radius: var(--wb-radius-25);
+      outline: var(--wb-size-12) solid var(--wb-ui-focus-ring);
+      outline-offset: var(--wb-size-25);
     }
 
-    svg {
-      width: 1rem;
-      height: 1rem;
-      min-width: 1rem;
+    &:disabled {
+      cursor: not-allowed;
     }
   }
 }
diff --git a/packages/ui/src/components/input/input.module.css b/packages/ui/src/components/input/input.module.css
index 32ba45b29..9f2977407 100644
--- a/packages/ui/src/components/input/input.module.css
+++ b/packages/ui/src/components/input/input.module.css
@@ -1,10 +1,12 @@
 @layer ui.component {
   .input {
+    min-width: 0;
+    width: 100%;
+    flex: 1;
     border: none;
     background: transparent;
     padding: 0;
-    color: unset;
-    width: 100%;
+    color: var(--ax-public-input-color);
 
     white-space: nowrap;
     overflow: hidden;
@@ -16,11 +18,12 @@
 
     &:disabled {
       color: var(--ax-public-input-color-disabled);
+      cursor: not-allowed;
     }
 
     &::placeholder {
-      color: unset;
-      opacity: 0.5;
+      color: var(--ax-public-input-placeholder-color);
+      opacity: 1;
     }
   }
 }
diff --git a/packages/ui/src/components/input/input.tsx b/packages/ui/src/components/input/input.tsx
index be57699ce..ae744b68a 100644
--- a/packages/ui/src/components/input/input.tsx
+++ b/packages/ui/src/components/input/input.tsx
@@ -1,43 +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 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,
+    label,
+    helperText,
+    isRequired,
+    className,
+    disabled,
+    readOnly,
+    id,
+    required,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    ...props
+  },
+  ref,
+) {
+  const isReadOnly = !disabled && (state === 'read-only' || readOnly === true);
+  const fieldState = disabled && state === 'read-only' ? 'default' : isReadOnly ? 'read-only' : state;
+  const isNativeRequired = required || isRequired;
+
   return (
-    <div
-      className={clsx(
-        inputRootStyles['input-root'],
-        inputSizeStyles[size],
-        {
-          'base--error': error,
-          'base--disabled': props.disabled,
-        },
-        className,
-      )}
-      // Padding lives on the wrapper, so clicks there miss the field - forward them.
-      onPointerDown={(event) => {
-        if (event.target !== event.currentTarget) return;
-        event.preventDefault();
-        event.currentTarget.querySelector('input')?.focus();
-      }}
+    <Field
+      id={id}
+      label={label}
+      helperText={helperText}
+      isRequired={isNativeRequired}
+      state={fieldState}
+      ariaDescribedBy={ariaDescribedBy}
     >
-      {startAdornment}
-      <InputBase {...props} className={clsx(inputStyles['input'], inputFontStyles[size])} />
-      {endAdornment}
-    </div>
+      {({ 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();
+          }}
+        >
+          {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>
+      )}
+    </Field>
   );
-}
+});
diff --git a/packages/ui/src/components/input/types.ts b/packages/ui/src/components/input/types.ts
index 03520df37..381d4e272 100644
--- a/packages/ui/src/components/input/types.ts
+++ b/packages/ui/src/components/input/types.ts
@@ -1,27 +1,4 @@
-import type { ItemSize } from '@ui/shared/types/item-size';
-import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { FieldControlProps } from '@ui/shared/types/field';
+import type { InputHTMLAttributes } from 'react';
 
-export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
-  /**
-   * Specifies the size of the input field.
-   * Can be 'small', 'medium', or 'large'.
-   * @default 'medium'
-   */
-  size?: ItemSize;
-
-  /**
-   * Element displayed at the end of the input field.
-   */
-  endAdornment?: ReactNode;
-
-  /**
-   * Element displayed at the start of the input field.
-   */
-  startAdornment?: ReactNode;
-
-  /**
-   * Renders the input in an error state.
-   * @default false
-   */
-  error?: boolean;
-};
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & FieldControlProps;
diff --git a/packages/ui/src/components/input/variables.css b/packages/ui/src/components/input/variables.css
index d93c6d8fe..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..a52c46e54
--- /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='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;
+    }
+
+    &:not([data-field-disabled]):focus-within {
+      border-color: var(--ax-public-number-field-root-border-color-focus);
+    }
+  }
+
+  .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..d52b1e665
--- /dev/null
+++ b/packages/ui/src/components/number-field/number-field.spec.tsx
@@ -0,0 +1,323 @@
+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();
+});
+
+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: Array<number | null> = [];
+
+  act(() => {
+    root.render(
+      <NumberField
+        aria-label="Quantity"
+        defaultValue={1}
+        min={0}
+        max={2}
+        onValueChange={(value) => values.push(value)}
+      />,
+    );
+  });
+
+  const input = getVisibleInput();
+
+  pressKey(input, 'ArrowUp');
+  pressKey(input, 'ArrowUp');
+
+  expect(values).toEqual([2]);
+
+  pressKey(input, 'ArrowDown');
+
+  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('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();
+
+  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();
+});
+
+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
new file mode 100644
index 000000000..1cd498f13
--- /dev/null
+++ b/packages/ui/src/components/number-field/number-field.tsx
@@ -0,0 +1,263 @@
+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 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 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,
+    defaultValue,
+    onValueChange,
+    min,
+    max,
+    step = 1,
+    size = 'm',
+    state = 'default',
+    prefixIcon,
+    suffixIcon,
+    onClear,
+    label,
+    helperText,
+    isRequired,
+    className,
+    disabled,
+    readOnly,
+    id,
+    name,
+    form,
+    required,
+    onPaste,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    ...props
+  },
+  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 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 (
+    <Field
+      id={id}
+      label={label}
+      helperText={helperText}
+      isRequired={isNativeRequired}
+      state={fieldState}
+      ariaDescribedBy={ariaDescribedBy}
+    >
+      {({ 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();
+            }}
+          >
+            {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
new file mode 100644
index 000000000..4b59599ea
--- /dev/null
+++ b/packages/ui/src/components/number-field/types.ts
@@ -0,0 +1,19 @@
+import type { NumberFieldRootChangeEventDetails } from '@base-ui/react/number-field';
+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 | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null, details: NumberFieldRootChangeEventDetails) => void;
+    min?: number;
+    max?: number;
+    /**
+     * @default 1
+     */
+    step?: number | 'any';
+  };
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..0ad674a2f 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) {
-      border-color: var(--ax-public-textarea-root-border-color-focus);
+    &[data-state='critical']:not([data-disabled]) {
+      background-color: var(--ax-public-textarea-root-background-color-critical);
+      border-color: var(--ax-public-textarea-root-border-color-critical);
     }
 
-    &:global(.base--error) {
-      background-color: var(--ax-public-textarea-root-background-color-error);
-      border-color: var(--ax-public-textarea-root-border-color-error);
-      color: var(--ax-public-textarea-root-color-error);
+    &[data-state='success']:not([data-disabled]) {
+      background-color: var(--ax-public-textarea-root-background-color-success);
+      border-color: var(--ax-public-textarea-root-border-color-success);
     }
 
-    &:global(.base--disabled) {
-      color: var(--ax-public-textarea-root-color-disabled);
+    &[data-state='read-only']:not([data-disabled]),
+    &[data-disabled] {
       background-color: var(--ax-public-textarea-root-background-color-disabled);
+      border-color: var(--ax-public-textarea-root-border-color);
+    }
+
+    &[data-disabled] {
+      color: var(--ax-public-textarea-root-color-disabled);
       cursor: not-allowed;
     }
+
+    &:not([data-disabled]):focus-within {
+      border-color: var(--ax-public-textarea-root-border-color-focus);
+    }
+  }
+
+  .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..f0250341c 100644
--- a/packages/ui/src/components/text-area/text-area.tsx
+++ b/packages/ui/src/components/text-area/text-area.tsx
@@ -1,125 +1,97 @@
+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 React from 'react';
+import { type ComponentPropsWithoutRef, type TextareaHTMLAttributes, forwardRef } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 
 import styles from './text-area.module.css';
+import inputSizeStyles from '@ui/shared/styles/field-control-size.module.css';
 import inputFontStyles from '@ui/shared/styles/input-font-size.module.css';
-import inputSizeStyles from '@ui/shared/styles/input-size.module.css';
 
-import type { ItemSize } from '../../shared/types/item-size';
+export type TextAreaProps = 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,
+    label,
+    helperText,
+    isRequired,
+    maxRows,
+    minRows,
+    disabled,
+    readOnly,
     className,
-  );
-
-  const textareaClasses = clsx(styles['text-area'], inputFontStyles[size]);
+    id,
+    required,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    ...props
+  },
+  ref,
+) {
+  const isReadOnly = !disabled && (state === 'read-only' || readOnly === true);
+  const fieldState = disabled && state === 'read-only' ? 'default' : isReadOnly ? 'read-only' : state;
+  const isNativeRequired = required || isRequired;
 
   return (
-    <div
-      className={containerClasses}
-      // Padding lives on the wrapper, so clicks there miss the field - forward them.
-      onPointerDown={(event) => {
-        if (event.target !== event.currentTarget) return;
-        event.preventDefault();
-        event.currentTarget.querySelector('textarea')?.focus();
-      }}
+    <Field
+      id={id}
+      label={label}
+      helperText={helperText}
+      isRequired={isNativeRequired}
+      state={fieldState}
+      ariaDescribedBy={ariaDescribedBy}
     >
-      <TextareaAutosize
-        value={value || ''}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        minRows={minRows}
-        maxRows={maxRows}
-        disabled={disabled}
-        onChange={onChange}
-        onClick={onClick}
-        onBlur={onBlur}
-        className={textareaClasses}
-        spellCheck={spellCheck}
-        {...props}
-      />
-    </div>
+      {({ controlId, describedBy }) => (
+        <div
+          className={clsx(styles['text-area-container'], styles[`size-${size}`], inputSizeStyles[size], className)}
+          data-state={fieldState}
+          data-disabled={disabled || undefined}
+          onPointerDown={(event) => {
+            if (event.target !== event.currentTarget) return;
+            event.preventDefault();
+            event.currentTarget.querySelector('textarea')?.focus();
+          }}
+        >
+          {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>}
+          <TextareaAutosize
+            {...props}
+            ref={ref}
+            id={controlId}
+            minRows={minRows}
+            maxRows={maxRows}
+            disabled={disabled}
+            readOnly={isReadOnly}
+            required={isNativeRequired}
+            aria-describedby={describedBy}
+            aria-invalid={fieldState === 'critical' ? true : ariaInvalid}
+            className={clsx(styles['text-area'], inputFontStyles[size])}
+          />
+          {suffixIcon && <span className={styles['icon']}>{suffixIcon}</span>}
+          {onClear && (
+            <button
+              type="button"
+              className={styles['clear']}
+              aria-label="Clear text area"
+              disabled={disabled || isReadOnly}
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={onClear}
+            >
+              <X />
+            </button>
+          )}
+        </div>
+      )}
+    </Field>
   );
-}
+});
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 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/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-font-size.module.css b/packages/ui/src/shared/styles/input-font-size.module.css
index 93cb8746e..341811578 100644
--- a/packages/ui/src/shared/styles/input-font-size.module.css
+++ b/packages/ui/src/shared/styles/input-font-size.module.css
@@ -1,4 +1,14 @@
 @layer ui.component {
+  .l {
+    composes: wb-text-label-l from global;
+  }
+
+  .m,
+  .s,
+  .xs {
+    composes: wb-text-label-m from global;
+  }
+
   .large {
     composes: ax-public-p9 from global;
   }
diff --git a/packages/ui/src/shared/types/field.ts b/packages/ui/src/shared/types/field.ts
new file mode 100644
index 000000000..6ad70754b
--- /dev/null
+++ b/packages/ui/src/shared/types/field.ts
@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+
+export const FIELD_STATES = ['default', 'critical', 'success', 'read-only'] as const;
+export const FIELD_SIZES = ['l', 'm', 's', 'xs'] as const;
+
+export type FieldState = (typeof FIELD_STATES)[number];
+export type FieldSize = (typeof FIELD_SIZES)[number];
+
+export type FieldControlProps = {
+  /**
+   * Disabled controls take precedence over the read-only state.
+   * @default 'default'
+   */
+  state?: FieldState;
+  /**
+   * @default 'm'
+   */
+  size?: FieldSize;
+  prefixIcon?: ReactNode;
+  suffixIcon?: ReactNode;
+  /** Renders a clear affordance that invokes this callback. */
+  onClear?: () => void;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  isRequired?: boolean;
+};
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',