From 7957686753fe03284f01f3d14708d59df6bcedd3 Mon Sep 17 00:00:00 2001
From: Cheton Wu <cheton_wu@trendmicro.com>
Date: Thu, 5 Feb 2026 12:22:03 +0800
Subject: [PATCH 1/2] feat: Add `FormControl` components with comprehensive
 accessibility support

This commit adds the FormControl component system to Tonic-UI, migrating it from experimental to production status.

Key changes:
- Add 8 form control components (FormControl, FormLabel, FormInput, FormTextarea, FormErrorMessage, FormHelperText, FormCharacterCount)
- Add useFormControl hook for context access
- Add comprehensive test suite (10 test cases)
- Add complete documentation with 11 interactive examples
- Remove experimental form-control files
- Update package exports and configuration

The FormControl system provides accessible, composable form fields with automatic ID generation, ARIA attribute management, and context-based state management.

Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>
---
 .changeset/tonic-ui-form-control.md           |   5 +
 packages/react-docs/config/sidebar-routes.js  |   2 +-
 .../pages/components/form-control/basic.js    |  21 ++
 .../form-control/character-count.js           |  26 +++
 .../form-control/complex-form.js}             |  47 +++-
 .../components/form-control/custom-styling.js |  73 +++++++
 .../pages/components/form-control/disabled.js |  17 ++
 .../components/form-control/error-messages.js |  25 +++
 .../pages/components/form-control/error.js    |  19 ++
 .../components/form-control/helper-text.js    |  21 ++
 .../components/form-control/horizontal.js     |  65 ++++++
 .../components/form-control/index.page.mdx    | 146 +++++++++++++
 .../pages/components/form-control/readonly.js |  17 ++
 .../pages/components/form-control/required.js |  17 ++
 .../experiments/form-control/basic-setup.js   |  98 ---------
 .../form-control/custom-styling.js            | 172 ---------------
 .../experiments/form-control/index.page.mdx   | 126 -----------
 packages/react-docs/pages/llms.txt            |   2 +
 packages/react/__tests__/index.test.js        |  10 +
 .../src/form-control/FormCharacterCount.js    |  32 +++
 .../react/src/form-control/FormControl.js     |  60 ++++++
 .../src/form-control/FormErrorMessage.js      |  50 +++++
 .../react/src/form-control/FormHelperText.js  |  22 ++
 packages/react/src/form-control/FormInput.js  |   6 +
 packages/react/src/form-control/FormLabel.js  |  32 +++
 .../react/src/form-control/FormTextarea.js    |   6 +
 .../__tests__/FormControl.test.js             | 203 ++++++++++++++++++
 packages/react/src/form-control/context.js    |   7 +
 packages/react/src/form-control/index.js      |   8 +
 packages/react/src/form-control/styles.js     | 127 +++++++++++
 .../react/src/form-control/useFormControl.js  |  13 ++
 .../react/src/form-control/withFormControl.js |  53 +++++
 packages/react/src/index.js                   |   1 +
 33 files changed, 1129 insertions(+), 400 deletions(-)
 create mode 100644 .changeset/tonic-ui-form-control.md
 create mode 100644 packages/react-docs/pages/components/form-control/basic.js
 create mode 100644 packages/react-docs/pages/components/form-control/character-count.js
 rename packages/react-docs/pages/{experiments/form-control/advanced-setup.js => components/form-control/complex-form.js} (76%)
 create mode 100644 packages/react-docs/pages/components/form-control/custom-styling.js
 create mode 100644 packages/react-docs/pages/components/form-control/disabled.js
 create mode 100644 packages/react-docs/pages/components/form-control/error-messages.js
 create mode 100644 packages/react-docs/pages/components/form-control/error.js
 create mode 100644 packages/react-docs/pages/components/form-control/helper-text.js
 create mode 100644 packages/react-docs/pages/components/form-control/horizontal.js
 create mode 100644 packages/react-docs/pages/components/form-control/index.page.mdx
 create mode 100644 packages/react-docs/pages/components/form-control/readonly.js
 create mode 100644 packages/react-docs/pages/components/form-control/required.js
 delete mode 100644 packages/react-docs/pages/experiments/form-control/basic-setup.js
 delete mode 100644 packages/react-docs/pages/experiments/form-control/custom-styling.js
 delete mode 100644 packages/react-docs/pages/experiments/form-control/index.page.mdx
 create mode 100644 packages/react/src/form-control/FormCharacterCount.js
 create mode 100644 packages/react/src/form-control/FormControl.js
 create mode 100644 packages/react/src/form-control/FormErrorMessage.js
 create mode 100644 packages/react/src/form-control/FormHelperText.js
 create mode 100644 packages/react/src/form-control/FormInput.js
 create mode 100644 packages/react/src/form-control/FormLabel.js
 create mode 100644 packages/react/src/form-control/FormTextarea.js
 create mode 100644 packages/react/src/form-control/__tests__/FormControl.test.js
 create mode 100644 packages/react/src/form-control/context.js
 create mode 100644 packages/react/src/form-control/index.js
 create mode 100644 packages/react/src/form-control/styles.js
 create mode 100644 packages/react/src/form-control/useFormControl.js
 create mode 100644 packages/react/src/form-control/withFormControl.js

diff --git a/.changeset/tonic-ui-form-control.md b/.changeset/tonic-ui-form-control.md
new file mode 100644
index 0000000000..43def8b35d
--- /dev/null
+++ b/.changeset/tonic-ui-form-control.md
@@ -0,0 +1,5 @@
+---
+"@tonic-ui/react": minor
+---
+
+feat: Add `FormControl` components with comprehensive accessibility support
diff --git a/packages/react-docs/config/sidebar-routes.js b/packages/react-docs/config/sidebar-routes.js
index b3b9bec244..fd837de584 100644
--- a/packages/react-docs/config/sidebar-routes.js
+++ b/packages/react-docs/config/sidebar-routes.js
@@ -89,7 +89,6 @@ export const routes = [
       { title: 'Getting started', path: 'experiments' },
 
       { title: 'FORM CONTROLS', heading: true },
-      { title: 'FormControl', path: 'experiments/form-control' },
       { title: 'ButtonBox', path: 'experiments/button-box' },
       { title: 'Dropdown', path: 'experiments/dropdown' },
       { title: 'DropdownBase', path: 'experiments/dropdown-base' },
@@ -222,6 +221,7 @@ export const routes = [
         },
       },
       { title: 'CheckboxGroup', path: 'components/checkbox-group' },
+      { title: 'FormControl', path: 'components/form-control' },
       {
         title: 'Input',
         path: 'components/input',
diff --git a/packages/react-docs/pages/components/form-control/basic.js b/packages/react-docs/pages/components/form-control/basic.js
new file mode 100644
index 0000000000..464722bd16
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/basic.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+  FormControl,
+  FormLabel,
+  FormInput,
+  FormHelperText,
+} from '@tonic-ui/react';
+
+const App = () => {
+  return (
+    <FormControl>
+      <FormLabel>Username</FormLabel>
+      <FormInput placeholder="Enter your username" />
+      <FormHelperText>
+        Choose a unique username that others will see
+      </FormHelperText>
+    </FormControl>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/form-control/character-count.js b/packages/react-docs/pages/components/form-control/character-count.js
new file mode 100644
index 0000000000..4e0b87db3c
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/character-count.js
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import {
+  FormControl,
+  FormLabel,
+  FormInput,
+  FormCharacterCount,
+} from '@tonic-ui/react';
+
+const App = () => {
+  const [bio, setBio] = useState('');
+  const maxChars = 50;
+
+  return (
+    <FormControl>
+      <FormLabel>Bio</FormLabel>
+      <FormInput
+        placeholder="Tell us about yourself"
+        value={bio}
+        onChange={(e) => setBio(e.target.value)}
+      />
+      <FormCharacterCount count={bio.length} maxCount={maxChars} />
+    </FormControl>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/experiments/form-control/advanced-setup.js b/packages/react-docs/pages/components/form-control/complex-form.js
similarity index 76%
rename from packages/react-docs/pages/experiments/form-control/advanced-setup.js
rename to packages/react-docs/pages/components/form-control/complex-form.js
index 82960bb7d9..9bd8d7c8d1 100644
--- a/packages/react-docs/pages/experiments/form-control/advanced-setup.js
+++ b/packages/react-docs/pages/components/form-control/complex-form.js
@@ -1,18 +1,26 @@
 import React, { useState } from 'react';
 import { ensureArray } from 'ensure-type';
-import { Box, Stack, Button, Text } from '@tonic-ui/react';
 import {
+  Box,
+  Stack,
+  Button,
+  Text,
+  Flex,
   FormControl,
-  FormInput,
   FormLabel,
+  FormInput,
+  FormTextarea,
   FormErrorMessage,
   FormHelperText,
-} from '@/experiments/form-control';
+  FormCharacterCount,
+} from '@tonic-ui/react';
 
 const App = () => {
   const [formData, setFormData] = useState({
     email: '',
     password: '',
+    country: '',
+    bio: '',
   });
 
   const [errors, setErrors] = useState({});
@@ -39,6 +47,19 @@ const App = () => {
         }
         return passwordErrors;
       }
+      case 'country': {
+        return !value ? 'Please select your experience level' : '';
+      }
+      case 'bio': {
+        const bioErrors = [];
+        if (value.length < 10) {
+          bioErrors.push('Bio must be at least 10 characters');
+        }
+        if (value.length > 200) {
+          bioErrors.push('Bio must not exceed 200 characters');
+        }
+        return bioErrors;
+      }
       default:
         return '';
     }
@@ -135,6 +156,26 @@ const App = () => {
             </FormHelperText>
           </FormControl>
 
+          {/* Bio textarea with character validation */}
+          <FormControl error={hasError('bio')}>
+            <FormLabel>Bio</FormLabel>
+            <FormTextarea
+              name="bio"
+              value={formData.bio}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              placeholder="Tell us about yourself..."
+              rows={4}
+            />
+            <FormErrorMessage errors={ensureArray(errors.bio)} />
+            <Flex justifyContent="space-between">
+              <FormHelperText>
+                Write a brief bio (10-200 characters)
+              </FormHelperText>
+              <FormCharacterCount count={formData.bio.length} maxCount={200} />
+            </Flex>
+          </FormControl>
+
           {/* Submit Button */}
           <Button
             type="submit"
diff --git a/packages/react-docs/pages/components/form-control/custom-styling.js b/packages/react-docs/pages/components/form-control/custom-styling.js
new file mode 100644
index 0000000000..5f482eb268
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/custom-styling.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  Stack,
+  Flex,
+  Text,
+  Tooltip,
+  FormControl,
+  FormLabel,
+  FormInput,
+  FormErrorMessage,
+} from '@tonic-ui/react';
+import { InfoOIcon } from '@tonic-ui/react-icons';
+
+// InfoTip component using Tooltip
+const InfoTip = ({ label }) => {
+  return (
+    <Tooltip label={label} maxWidth={320}>
+      <InfoOIcon
+        color="gray:50"
+        _hover={{
+          color: 'gray:60',
+        }}
+      />
+    </Tooltip>
+  );
+};
+
+const App = () => {
+  return (
+    <Stack direction="column" spacing="4x">
+      {/* Custom required indicator with text */}
+      <FormControl gap="1x">
+        <Flex>
+          <FormLabel>Email</FormLabel>
+          <Text color="red:50" fontSize="xs" ml="2x">
+            (optional)
+          </Text>
+        </Flex>
+        <FormInput placeholder="Custom text indicator" />
+      </FormControl>
+
+      {/* Label with InfoTip */}
+      <FormControl gap="1x">
+        <Flex alignItems="center" gap="2x">
+          <FormLabel required>API Key</FormLabel>
+          <InfoTip label="Your API key is used to authenticate requests. Keep it secure and don't share it publicly." />
+        </Flex>
+        <FormInput placeholder="Enter your API key" />
+      </FormControl>
+
+      {/* Error message with InfoTip */}
+      <FormControl error gap="1x">
+        <FormLabel required>Password</FormLabel>
+        <FormInput type="password" placeholder="Enter password" />
+        <FormErrorMessage
+          errors={[
+            <Flex key="password-length" alignItems="center" gap="2x">
+              <Text>Password must contain at least 8 characters</Text>
+              <InfoTip label="Use a mix of uppercase, lowercase, numbers, and special characters for better security." />
+            </Flex>,
+            'Must include at least one uppercase letter',
+            <Flex key="password-number" alignItems="center" gap="2x">
+              <Text>Must include at least one number</Text>
+              <InfoTip label="Numbers help make your password more secure against common attacks." />
+            </Flex>,
+          ]}
+        />
+      </FormControl>
+    </Stack>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/form-control/disabled.js b/packages/react-docs/pages/components/form-control/disabled.js
new file mode 100644
index 0000000000..29b65ed637
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/disabled.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {
+  FormControl,
+  FormLabel,
+  FormInput,
+} from '@tonic-ui/react';
+
+const App = () => {
+  return (
+    <FormControl disabled>
+      <FormLabel>Phone Number</FormLabel>
+      <FormInput placeholder="Disabled field" />
+    </FormControl>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/form-control/error-messages.js b/packages/react-docs/pages/components/form-control/error-messages.js
new file mode 100644
index 0000000000..01cfa96df6
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/error-messages.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+  FormControl,
+  FormLabel,
+  FormInput,
+  FormErrorMessage,
+} from '@tonic-ui/react';
+
+const App = () => {
+  return (
+    <FormControl error>
+      <FormLabel>Password</FormLabel>
+      <FormInput type="password" placeholder="Enter your password" />
+      <FormErrorMessage
+        errors={[
+          'Password must be at least 8 characters',
+          'Must include upper and lowercase letters',
+          'Must include at least one number',
+        ]}
+      />
+    </FormControl>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/form-control/error.js b/packages/react-docs/pages/components/form-control/error.js
new file mode 100644
index 0000000000..8de5bcbb1f
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/error.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  FormControl,
+  FormLabel,
+  FormInput,
+  FormErrorMessage,
+} from '@tonic-ui/react';
+
+const App = () => {
+  return (
+    <FormControl error>
+      <FormLabel>Email Address</FormLabel>
+      <FormInput type="email" placeholder="Enter your email" />
+      <FormErrorMessage errors="Please enter a valid email address" />
+    </FormControl>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/form-control/helper-text.js b/packages/react-docs/pages/components/form-control/helper-text.js
new file mode 100644
index 0000000000..5f14e3cc20
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/helper-text.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+  FormControl,
+  FormLabel,
+  FormInput,
+  FormHelperText,
+} from '@tonic-ui/react';
+
+const App = () => {
+  return (
+    <FormControl>
+      <FormLabel>Password</FormLabel>
+      <FormInput type="password" placeholder="Enter your password" />
+      <FormHelperText>
+        Password must be at least 8 characters with mixed case letters
+      </FormHelperText>
+    </FormControl>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/form-control/horizontal.js b/packages/react-docs/pages/components/form-control/horizontal.js
new file mode 100644
index 0000000000..de5c9036af
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/horizontal.js
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import {
+  Stack,
+  Flex,
+  FormControl,
+  FormLabel,
+  FormInput,
+  FormErrorMessage,
+  FormCharacterCount,
+} from '@tonic-ui/react';
+
+const App = () => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const nameError =
+    name.length > 0 && name.length < 2
+      ? 'Name must be at least 2 characters'
+      : null;
+  const emailError =
+    email.length > 0 && !email.includes('@')
+      ? 'Email must include "@" symbol'
+      : null;
+
+  return (
+    <Stack direction="column" spacing="4x">
+      <FormControl orientation="horizontal" error={!!nameError}>
+        <FormLabel width="20x" required>
+          Name
+        </FormLabel>
+        <FormInput
+          placeholder="Enter your name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <Flex gridColumn="2">
+          <FormErrorMessage errors={nameError} />
+          <FormCharacterCount count={name.length} maxCount={20} />
+        </Flex>
+      </FormControl>
+
+      <FormControl orientation="horizontal" error={!!emailError}>
+        <FormLabel width="20x" required>
+          Email
+        </FormLabel>
+        <FormInput
+          placeholder="Enter email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <Flex gridColumn="2">
+          <FormErrorMessage errors={emailError} />
+          <FormCharacterCount count={email.length} maxCount={50} />
+        </Flex>
+      </FormControl>
+
+      <FormControl orientation="horizontal">
+        <FormLabel width="20x">Phone</FormLabel>
+        <FormInput placeholder="Enter your phone number" />
+      </FormControl>
+    </Stack>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/form-control/index.page.mdx b/packages/react-docs/pages/components/form-control/index.page.mdx
new file mode 100644
index 0000000000..970e901dae
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/index.page.mdx
@@ -0,0 +1,146 @@
+# FormControl
+
+A comprehensive form control system that provides accessible, composable form fields with automatic context management and consistent styling.
+
+## Import
+
+- `FormControl`: Provides context and wrapper structure, managing form field state and accessibility attributes.
+- `FormLabel`: Label component with required indicator support and automatic association with form fields.
+- `FormInput`: Input component that automatically associates with label, error message, helper text, and character count.
+- `FormTextarea`: Textarea component with automatic form control context integration.
+- `FormHelperText`: Helper text component that provides form guidance.
+- `FormErrorMessage`: Error message display supporting single or multiple errors.
+- `FormCharacterCount`: Character counter displaying character limits and over-limit states.
+- `useFormControl`: Hook to access FormControl context.
+
+```js
+import {
+  FormControl,
+  FormLabel,
+  FormInput,
+  FormTextarea,
+  FormHelperText,
+  FormErrorMessage,
+  FormCharacterCount,
+  useFormControl,
+} from '@tonic-ui/react';
+```
+
+## Usage
+
+### Basic usage
+
+Here's the simplest configuration to get started with the `FormControl` system.
+
+{render('./basic')}
+
+### Form states
+
+#### Disabled state
+
+{render('./disabled')}
+
+#### Read-only state
+
+{render('./readonly')}
+
+#### Error state
+
+> For displaying error messages, see [Error messages](#error-messages) section below.
+
+{render('./error')}
+
+### Required fields
+
+Use `required` prop on `FormLabel` to display a red asterisk.
+
+{render('./required')}
+
+### Helper text
+
+Use `FormHelperText` to provide additional guidance.
+
+{render('./helper-text')}
+
+### Error messages
+
+`FormErrorMessage` will only show up when the `error` prop in `FormControl` is `true`. Supports single or multiple errors.
+
+> ℹ️ Displays single errors as text or multiple errors as `<ul><li>` lists.
+
+{render('./error-messages')}
+
+### Character counting
+
+Use `FormCharacterCount` to display character limits.
+
+{render('./character-count')}
+
+### Horizontal layout
+
+Use `orientation="horizontal"` to create horizontal form layouts.
+
+{render('./horizontal')}
+
+### Complex form
+
+A more complex form example with validation, helper text, and character counting.
+
+{render('./complex-form')}
+
+### Custom styling
+
+Examples of custom indicators and advanced styling patterns.
+
+{render('./custom-styling')}
+
+## Accessibility
+
+- `FormControl` automatically handles ID generation, ensuring label and input are properly associated using `htmlFor` and `id` attributes.
+- Error messages automatically set `role="alert"` for screen readers.
+
+### ARIA Attributes
+
+FormControl automatically manages the following ARIA attributes:
+- `aria-invalid`: Automatically set when `error={true}`.
+- `aria-describedby`: Automatically includes `formHelperTextId`, `formErrorMessageId`, and `formCharacterCountId`.
+- `aria-disabled`: Automatically set when `disabled={true}`.
+- `aria-readonly`: Automatically set when `readOnly={true}`.
+
+## Props
+
+### FormControl
+
+| Prop        | Type                       | Default    | Description                                                        |
+| ----------- | -------------------------- | ---------- | ------------------------------------------------------------------ |
+| error       | boolean                    | false      | If `true`, passes error state to child form elements that support the error prop (e.g., `FormInput`, `FormTextarea`), and displays `FormErrorMessage`. |
+| disabled    | boolean                    | false      | If `true`, passes disabled state to child form elements that support the disabled prop (e.g., `FormInput`, `FormTextarea`). |
+| readOnly    | boolean                    | false      | If `true`, passes read-only state to child form elements that support the readOnly prop (e.g., `FormInput`, `FormTextarea`). |
+| orientation | 'horizontal' \| 'vertical' | 'vertical' | The layout orientation of the form                                 |
+| children    | ReactNode                  | -          | Child component content                                            |
+
+### FormLabel
+
+| Prop     | Type      | Default | Description                                              |
+| -------- | --------- | ------- | -------------------------------------------------------- |
+| required | boolean   | false   | Whether to display the required indicator (red asterisk) |
+| children | ReactNode | -       | Label text content                                       |
+
+### FormHelperText
+
+| Prop     | Type      | Default | Description         |
+| -------- | --------- | ------- | ------------------- |
+| children | ReactNode | -       | Helper text content |
+
+### FormErrorMessage
+
+| Prop   | Type                     | Default | Description                                     |
+| ------ | ------------------------ | ------- | ----------------------------------------------- |
+| errors | ReactNode[] \| ReactNode | []      | Error messages, supports string or string array |
+
+### FormCharacterCount
+
+| Prop     | Type   | Default | Description                      |
+| -------- | ------ | ------- | -------------------------------- |
+| count    | number | 0       | Current input character count.   |
+| maxCount | number | 0       | Maximum allowed character count. |
diff --git a/packages/react-docs/pages/components/form-control/readonly.js b/packages/react-docs/pages/components/form-control/readonly.js
new file mode 100644
index 0000000000..a8c4aad691
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/readonly.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {
+  FormControl,
+  FormLabel,
+  FormInput,
+} from '@tonic-ui/react';
+
+const App = () => {
+  return (
+    <FormControl readOnly>
+      <FormLabel>Company Name</FormLabel>
+      <FormInput value="Acme Corporation" />
+    </FormControl>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/form-control/required.js b/packages/react-docs/pages/components/form-control/required.js
new file mode 100644
index 0000000000..c417d26d8f
--- /dev/null
+++ b/packages/react-docs/pages/components/form-control/required.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {
+  FormControl,
+  FormLabel,
+  FormInput,
+} from '@tonic-ui/react';
+
+const App = () => {
+  return (
+    <FormControl>
+      <FormLabel required>Email Address</FormLabel>
+      <FormInput type="email" placeholder="Enter your email" />
+    </FormControl>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/experiments/form-control/basic-setup.js b/packages/react-docs/pages/experiments/form-control/basic-setup.js
deleted file mode 100644
index 709dbd73ca..0000000000
--- a/packages/react-docs/pages/experiments/form-control/basic-setup.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Flex, Stack } from '@tonic-ui/react';
-import {
-  FormControl,
-  FormInput,
-  FormLabel,
-  FormErrorMessage,
-  FormHelperText,
-  FormCharacterCount,
-} from '@/experiments/form-control';
-
-const App = () => {
-  const [bio, setBio] = useState('');
-  const maxChars = 20;
-
-  return (
-    <Stack direction="column" spacing="6x">
-      {/* 1. Basic field with helper text */}
-      <Box>
-        <FormControl>
-          <FormLabel>Username</FormLabel>
-          <FormInput placeholder="Enter your username" />
-          <FormErrorMessage errors={['This field has an error']} />
-          <FormHelperText>
-            Choose a unique username that others will see
-          </FormHelperText>
-        </FormControl>
-      </Box>
-
-      {/* 2. Required field with helper text */}
-      <Box>
-        <FormControl>
-          <FormLabel required>Email Address</FormLabel>
-          <FormInput type="email" placeholder="Enter your email" />
-          <FormErrorMessage errors={['Please enter a valid email']} />
-          <FormHelperText>
-            We&apos;ll use this to send you important updates
-          </FormHelperText>
-        </FormControl>
-      </Box>
-
-      {/* 3. Invalid field with multiple errors */}
-      <Box>
-        <FormControl error>
-          <FormLabel>Password</FormLabel>
-          <FormInput type="password" placeholder="Enter your password" />
-          <FormErrorMessage
-            errors={[
-              'Password must be at least 8 characters.',
-              'Must include upper and lowercase letters.',
-            ]}
-          />
-          <FormHelperText>Use a strong password for security</FormHelperText>
-        </FormControl>
-      </Box>
-
-      {/* 4. Read-only field */}
-      <Box>
-        <FormControl readOnly>
-          <FormLabel>Company Name</FormLabel>
-          <FormInput value="Acme Corporation" />
-          <FormHelperText>This field is read-only</FormHelperText>
-        </FormControl>
-      </Box>
-
-      {/* 5. Disabled field */}
-      <Box>
-        <FormControl disabled>
-          <FormLabel>Phone Number</FormLabel>
-          <FormInput placeholder="Disabled field" />
-          <FormHelperText>This field is currently disabled</FormHelperText>
-        </FormControl>
-      </Box>
-
-      {/* 6. Field with Character Count */}
-      <Box>
-        <FormControl error={bio.length > maxChars}>
-          <FormLabel required>About You</FormLabel>
-          <FormInput
-            placeholder="Tell us about yourself"
-            value={bio}
-            onChange={(e) => setBio(e.target.value)}
-          />
-
-          <Flex justifyContent="space-between">
-            <Stack flexDirection="column" gap="1x">
-              <FormErrorMessage errors={['Exceeded maximum character limit']} />
-              <FormHelperText>Maximum {maxChars} characters</FormHelperText>
-            </Stack>
-            <FormCharacterCount value={bio} max={maxChars} />
-          </Flex>
-        </FormControl>
-      </Box>
-    </Stack>
-  );
-};
-
-export default App;
diff --git a/packages/react-docs/pages/experiments/form-control/custom-styling.js b/packages/react-docs/pages/experiments/form-control/custom-styling.js
deleted file mode 100644
index f25f61e01b..0000000000
--- a/packages/react-docs/pages/experiments/form-control/custom-styling.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Box,
-  Stack,
-  Flex,
-  Text,
-  Divider,
-  Tooltip,
-} from '@tonic-ui/react';
-import { InfoOIcon } from '@tonic-ui/react-icons';
-import {
-  FormControl,
-  FormInput,
-  FormLabel,
-  FormErrorMessage,
-  FormHelperText,
-  FormCharacterCount,
-} from '@/experiments/form-control';
-
-// InfoTip component using Tooltip
-const InfoTip = ({ label }) => {
-  return (
-    <Tooltip label={label}>
-      <InfoOIcon
-        cursor="help"
-        color="gray:50"
-        _hover={{
-          color: 'gray:60',
-        }}
-      />
-    </Tooltip>
-  );
-};
-
-const App = () => {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  // Validation logic
-  const nameError =
-    name.length > 0 && name.length < 2
-      ? 'Name must be at least 2 characters'
-      : null;
-  const emailError = [];
-  if (email.length > 0 && !email.includes('@')) {
-    emailError.push('Email must include "@" symbol');
-  }
-  if (email.length > 0 && !/\.[a-zA-Z]{2,}$/.test(email)) {
-    emailError.push('Email must include a valid domain (e.g., .com, .net)');
-  }
-  if (email.length > 0 && email.length < 5) {
-    emailError.push('Email must be at least 5 characters');
-  }
-
-  return (
-    <Stack direction="column" spacing="8x">
-      <Text fontSize="xl" fontWeight="semibold">
-        Custom Styling Examples
-      </Text>
-
-      {/* Horizontal Layout */}
-      <Box>
-        <Text fontSize="lg" fontWeight="medium" mb="4x">
-          Horizontal Layout with Character Count
-        </Text>
-
-        <Stack direction="column" spacing="4x">
-          <FormControl orientation="horizontal" error={!!nameError}>
-            <FormLabel width="20x" required>
-              Name
-            </FormLabel>
-            <FormInput
-              placeholder="Enter your name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-            />
-
-            <Flex
-              justifyContent="space-between"
-              flexDirection="row-reverse"
-              alignItems="center"
-              gridColumn="2"
-            >
-              <FormCharacterCount value={name} max={20} />
-              <FormErrorMessage errors={nameError} />
-            </Flex>
-          </FormControl>
-
-          <FormControl orientation="horizontal" error={!!emailError}>
-            <FormLabel width="20x" required>
-              Email
-            </FormLabel>
-            <FormInput
-              placeholder="Enter email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-            <Flex gridColumn="2" justifyContent="space-between">
-              <Stack flexDirection="column" gap="1x">
-                <FormErrorMessage errors={emailError} />
-                <FormHelperText>
-                  This is a required field. Please enter a valid email.
-                </FormHelperText>
-              </Stack>
-              <FormCharacterCount value={email} max={50} />
-            </Flex>
-          </FormControl>
-
-          <FormControl orientation="horizontal">
-            <FormLabel width="20x">Phone</FormLabel>
-            <FormInput placeholder="Enter your phone number" />
-            <FormHelperText>
-              This is an optional field. Please enter a valid phone number.
-            </FormHelperText>
-          </FormControl>
-        </Stack>
-      </Box>
-
-      <Divider />
-
-      {/* Custom Indicators & InfoTip */}
-      <Box>
-        <Text fontSize="lg" fontWeight="medium" mb="4x">
-          Custom Indicators & InfoTip
-        </Text>
-
-        <Stack direction="column" spacing="4x">
-          {/* Custom required indicator with text */}
-          <FormControl gap="1x">
-            <Flex>
-              <FormLabel>Email</FormLabel>
-              <Text color="red:50" fontSize="xs" ml="2x">
-                (optional)
-              </Text>
-            </Flex>
-            <FormInput placeholder="Custom text indicator" />
-          </FormControl>
-
-          {/* Label with InfoTip */}
-          <FormControl gap="1x">
-            <Flex alignItems="center" gap="2x">
-              <FormLabel required>API Key</FormLabel>
-              <InfoTip label="Your API key is used to authenticate requests. Keep it secure and don't share it publicly." />
-            </Flex>
-            <FormInput placeholder="Enter your API key" />
-          </FormControl>
-
-          {/* Error message with InfoTip */}
-          <FormControl error gap="1x">
-            <FormLabel required>Password</FormLabel>
-            <FormInput type="password" placeholder="Enter password" />
-            <FormErrorMessage
-              errors={[
-                <Flex key="password-length" alignItems="center" gap="2x">
-                  <Text>Password must contain at least 8 characters</Text>
-                  <InfoTip label="Use a mix of uppercase, lowercase, numbers, and special characters for better security." />
-                </Flex>,
-                'Must include at least one uppercase letter',
-                <Flex key="password-number" alignItems="center" gap="2x">
-                  <Text>Must include at least one number</Text>
-                  <InfoTip label="Numbers help make your password more secure against common attacks." />
-                </Flex>,
-              ]}
-            />
-          </FormControl>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-};
-
-export default App;
diff --git a/packages/react-docs/pages/experiments/form-control/index.page.mdx b/packages/react-docs/pages/experiments/form-control/index.page.mdx
deleted file mode 100644
index 5bff4444fe..0000000000
--- a/packages/react-docs/pages/experiments/form-control/index.page.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
-import CodeBlock from '@/components/CodeBlock';
-import SourceCode from '@/components/SourceCode';
-import { List, ListItem } from '@/experiments/list';
-import _FormCharacterCount_ from '!!raw-loader!@/experiments/form-control/FormCharacterCount';
-import _FormControl_ from '!!raw-loader!@/experiments/form-control/FormControl';
-import _FormErrorMessage_ from '!!raw-loader!@/experiments/form-control/FormErrorMessage';
-import _FormHelperText_ from '!!raw-loader!@/experiments/form-control/FormHelperText';
-import _FormInput_ from '!!raw-loader!@/experiments/form-control/FormInput';
-import _FormLabel_ from '!!raw-loader!@/experiments/form-control/FormLabel';
-
-# FormControl
-
-A complete set of form control components that deliver accessible, composable form fields with built-in context management and consistent styling:
-* **Automatic ID generation and association**: Labels and inputs are automatically linked for accessibility
-* **Accessible by default**: Built-in ARIA attribute support including `aria-invalid` and `aria-describedby`
-* **Flexible composition**: Compose only the components you need to build form fields flexibly
-* **Character counting**: Built-in character limit functionality with over-limit state display
-* **Horizontal layouts**: Support for horizontally arranged form design patterns
-* **Multiple error messages**: Support for multiple error messages in string or array format
-
-## Components
-
-* `FormControl`: Provides context and a wrapper structure, managing form state.
-* `FormLabel`: Renders a label with required indicator support and automatic association.
-* `FormInput`: Renders an input automatically associated with the `FormControl` context. Supports `disabled`, `readOnly`, and `error` states, and links to `FormLabel`, `FormErrorMessage`, `FormHelperText`, and `FormCharacterCount` for accessibility.
-* `FormErrorMessage`: Displays one or multiple error messages.
-* `FormHelperText`: Provides helper text for additional guidance.
-* `FormCharacterCount`: Displays character limits and over-limit states.
-
-## Examples
-
-### Basic setup
-
-A set of straightforward examples to get you started with the `FormControl` components:
-
-{render('./basic-setup')}
-
-### Advanced setup
-
-An advanced example showcasing validation, helper text, and character counting:
-
-{render('./advanced-setup')}
-
-### Custom styling
-
-Examples of horizontal layouts, custom required indicators, and advanced styling patterns.
-
-{render('./custom-styling')}
-
-## Props
-
-### FormCharacterCount
-
-| Name | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| max | number | 0 | Maximum character limit |
-| value | string | '' | Text content to count characters for |
-
-### FormControl
-
-| Name | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| children | ReactNode | | |
-| disabled | boolean | false | Disables the entire form field including all child components |
-| error | boolean | false | Sets error state, affects styling and behavior of child components |
-| orientation | string | 'vertical' | The orientation of the component. One of: 'horizontal', 'vertical' |
-| readOnly | boolean | false | Sets the field to read-only state |
-
-### FormErrorMessage
-
-| Name | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| errors | ReactNode[] \| ReactNode | [] | Error messages, supports string or string array |
-
-* Displayed only when `FormControl` has `error={true}`
-* A single error message is rendered as text
-* Multiple error messages are rendered as a `<ul><li>` list
-* Automatically applies `role="alert"` for accessibility
-
-### FormHelperText
-
-| Name | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| children | ReactNode | | |
-
-### FormInput
-
-| Name | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| disabled | boolean | | If `true`, the input is disabled and the user cannot interact with it. |
-| error | boolean | | If `true`, the input displays a red border to indicate an error. |
-| readOnly | boolean | | If `true`, the value of the input cannot be edited. |
-| size | string | 'md' | The visual size of the `input` element. One of: 'sm', 'md', 'lg' |
-| variant | string | 'outline' | The variant of the input style to use. One of: 'outline', 'filled', 'flush', 'unstyled' |
-
-### FormLabel
-
-| Name | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| children | ReactNode | | |
-| required | boolean | false | Whether to display the required indicator (red asterisk) |
-
-**Note**: This component automatically sets the `htmlFor` attribute, associating with the input ID from `FormControl` context.
-
-## Source code
-
-<List>
-  <ListItem>
-    <SourceCode name="FormCharacterCount.js" code={_FormCharacterCount_} />
-  </ListItem>
-  <ListItem>
-    <SourceCode name="FormControl.js" code={_FormControl_} />
-  </ListItem>
-  <ListItem>
-    <SourceCode name="FormErrorMessage.js" code={_FormErrorMessage_} />
-  </ListItem>
-  <ListItem>
-    <SourceCode name="FormHelperText.js" code={_FormHelperText_} />
-  </ListItem>
-  <ListItem>
-    <SourceCode name="FormInput.js" code={_FormInput_} />
-  </ListItem>
-  <ListItem>
-    <SourceCode name="FormLabel.js" code={_FormLabel_} />
-  </ListItem>
-</List>
diff --git a/packages/react-docs/pages/llms.txt b/packages/react-docs/pages/llms.txt
index e98fbd8e9d..25532960b8 100644
--- a/packages/react-docs/pages/llms.txt
+++ b/packages/react-docs/pages/llms.txt
@@ -174,6 +174,8 @@
 
 [CheckboxGroup]({{PAGE_BASE}}/components/checkbox-group/): <classification>LLM should read this page when using the CheckboxGroup component for grouping related checkboxes, implementing multi-selection interfaces with grouped checkbox controls, or creating accessible checkbox groups with shared state management. Supports arbitrary value types, controlled/uncontrolled modes, different orientations, colors, sizes, and states including asynchronous data loading scenarios.</classification>
 
+[FormControl]({{PAGE_BASE}}/components/form-control/): <classification>LLM should read this page when creating accessible form fields that integrate FormLabel, Input, FormHelperText, FormErrorMessage, and FormCharacterCount into a unified structure. Provides automatic ID generation, ARIA attribute management, and context-based form control state management.</classification>
+
 [Input]({{PAGE_BASE}}/components/input/): <classification>LLM should read this page when using the Input component for text input fields, implementing form controls with validation, or creating accessible input elements. Often used with InputGroup, InputControl, and form-related components.</classification>
 
 [InputBase]({{PAGE_BASE}}/components/input-base/): <classification>LLM should read this page when using the InputBase component for custom input implementations, creating custom form controls, or building input variants with foundational input functionality and built-in accessibility features. Used as the base for Input and related components.</classification>
diff --git a/packages/react/__tests__/index.test.js b/packages/react/__tests__/index.test.js
index 37dda18b0e..06224e42c4 100644
--- a/packages/react/__tests__/index.test.js
+++ b/packages/react/__tests__/index.test.js
@@ -86,6 +86,16 @@ test('should match expected exports', () => {
     // flex
     'Flex',
 
+    // form-control
+    'FormCharacterCount',
+    'FormControl',
+    'FormErrorMessage',
+    'FormHelperText',
+    'FormInput',
+    'FormLabel',
+    'FormTextarea',
+    'useFormControl',
+
     // grid
     'Grid',
 
diff --git a/packages/react/src/form-control/FormCharacterCount.js b/packages/react/src/form-control/FormCharacterCount.js
new file mode 100644
index 0000000000..bf347bfde0
--- /dev/null
+++ b/packages/react/src/form-control/FormCharacterCount.js
@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import { useId } from '@tonic-ui/react-hooks';
+import { Text } from '../text';
+import { Flex } from '../flex';
+import useFormControl from './useFormControl';
+import {
+  useFormCharacterCountColors,
+  useFormCharacterCountStyle,
+} from './styles';
+
+const FormCharacterCount = forwardRef(
+  ({ count = 0, maxCount = 0, ...rest }, ref) => {
+    const defaultId = useId();
+    const formControl = useFormControl();
+    const isOverLimit = count > maxCount;
+
+    const id = formControl?.formCharacterCountId ?? defaultId;
+    const { lengthColor, maxColor } = useFormCharacterCountColors({ isOverLimit });
+    const styleProps = useFormCharacterCountStyle();
+
+    return (
+      <Flex ref={ref} id={id} {...styleProps} {...rest}>
+        <Text color={lengthColor}>{count}</Text>
+        <Text color={maxColor}>/{maxCount}</Text>
+      </Flex>
+    );
+  }
+);
+
+FormCharacterCount.displayName = 'FormCharacterCount';
+
+export default FormCharacterCount;
diff --git a/packages/react/src/form-control/FormControl.js b/packages/react/src/form-control/FormControl.js
new file mode 100644
index 0000000000..5f61e5087c
--- /dev/null
+++ b/packages/react/src/form-control/FormControl.js
@@ -0,0 +1,60 @@
+import React, { forwardRef, useMemo } from 'react';
+import { useId } from '@tonic-ui/react-hooks';
+import { Stack } from '../stack';
+import { FormControlContext } from './context';
+import { useFormControlStyle } from './styles';
+
+const FormControl = forwardRef(
+  (
+    {
+      children,
+      error = false,
+      disabled = false,
+      readOnly = false,
+      orientation = 'vertical',
+      ...rest
+    },
+    ref
+  ) => {
+    const styleProps = useFormControlStyle({ orientation });
+    const formCharacterCountId = useId();
+    const formErrorMessageId = useId();
+    const formHelperTextId = useId();
+    const fieldId = useId();
+
+    const contextValue = useMemo(
+      () => ({
+        disabled,
+        error,
+        readOnly,
+        formCharacterCountId,
+        formErrorMessageId,
+        formHelperTextId,
+        fieldId,
+        orientation,
+      }),
+      [
+        disabled,
+        error,
+        readOnly,
+        formCharacterCountId,
+        formErrorMessageId,
+        formHelperTextId,
+        fieldId,
+        orientation,
+      ]
+    );
+
+    return (
+      <FormControlContext.Provider value={contextValue}>
+        <Stack ref={ref} {...styleProps} {...rest}>
+          {children}
+        </Stack>
+      </FormControlContext.Provider>
+    );
+  }
+);
+
+FormControl.displayName = 'FormControl';
+
+export default FormControl;
diff --git a/packages/react/src/form-control/FormErrorMessage.js b/packages/react/src/form-control/FormErrorMessage.js
new file mode 100644
index 0000000000..425843d8bb
--- /dev/null
+++ b/packages/react/src/form-control/FormErrorMessage.js
@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react';
+import { ensureArray } from 'ensure-type';
+import { useId } from '@tonic-ui/react-hooks';
+import { Text } from '../text';
+import { Box } from '../box';
+import useFormControl from './useFormControl';
+import {
+  useFormErrorMessageStyle,
+  useFormErrorMessageListStyle,
+} from './styles';
+
+const FormErrorMessage = forwardRef(({ errors = [], ...rest }, ref) => {
+  const defaultId = useId();
+  const { error, formErrorMessageId } = useFormControl() ?? {};
+  const id = formErrorMessageId ?? defaultId;
+  const styleProps = useFormErrorMessageStyle();
+  const listStyleProps = useFormErrorMessageListStyle();
+
+  if (!error) {
+    return null;
+  }
+
+  const normalizedErrors = ensureArray(errors);
+
+  if (normalizedErrors.length === 0) {
+    return null;
+  }
+
+  const isSingleError = normalizedErrors.length === 1;
+
+  return (
+    <Text ref={ref} id={id} role="alert" {...styleProps} {...rest}>
+      {isSingleError ? (
+        normalizedErrors[0]
+      ) : (
+        <Box as="ul" {...listStyleProps}>
+          {normalizedErrors.map((error, index) => (
+            <Box as="li" key={index}>
+              {error}
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Text>
+  );
+});
+
+FormErrorMessage.displayName = 'FormErrorMessage';
+
+export default FormErrorMessage;
diff --git a/packages/react/src/form-control/FormHelperText.js b/packages/react/src/form-control/FormHelperText.js
new file mode 100644
index 0000000000..7dc8ad6f41
--- /dev/null
+++ b/packages/react/src/form-control/FormHelperText.js
@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import { useId } from '@tonic-ui/react-hooks';
+import { Text } from '../text';
+import useFormControl from './useFormControl';
+import { useFormHelperTextStyle } from './styles';
+
+const FormHelperText = forwardRef(({ children, ...rest }, ref) => {
+  const defaultId = useId();
+  const { formHelperTextId } = useFormControl() ?? {};
+  const id = formHelperTextId ?? defaultId;
+  const styleProps = useFormHelperTextStyle();
+
+  return (
+    <Text ref={ref} id={id} role="note" {...styleProps} {...rest}>
+      {children}
+    </Text>
+  );
+});
+
+FormHelperText.displayName = 'FormHelperText';
+
+export default FormHelperText;
diff --git a/packages/react/src/form-control/FormInput.js b/packages/react/src/form-control/FormInput.js
new file mode 100644
index 0000000000..d4a4e65b91
--- /dev/null
+++ b/packages/react/src/form-control/FormInput.js
@@ -0,0 +1,6 @@
+import { Input } from '../input';
+import withFormControl from './withFormControl';
+
+const FormInput = withFormControl(Input);
+
+export default FormInput;
diff --git a/packages/react/src/form-control/FormLabel.js b/packages/react/src/form-control/FormLabel.js
new file mode 100644
index 0000000000..55c1ec6646
--- /dev/null
+++ b/packages/react/src/form-control/FormLabel.js
@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import { ariaAttr } from '@tonic-ui/utils';
+import { TextLabel } from '../text';
+import { Box } from '../box';
+import useFormControl from './useFormControl';
+import { useFormLabelStyle, useFormLabelRequiredStyle } from './styles';
+
+const FormLabel = forwardRef(({ children, required = false, ...rest }, ref) => {
+  const { fieldId } = useFormControl() ?? {};
+  const labelStyleProps = useFormLabelStyle();
+  const requiredStyleProps = useFormLabelRequiredStyle();
+  const ariaProps = {
+    'aria-required': ariaAttr(required),
+  };
+
+  return (
+    <TextLabel
+      ref={ref}
+      htmlFor={fieldId}
+      {...ariaProps}
+      {...labelStyleProps}
+      {...rest}
+    >
+      {children}
+      {required && <Box {...requiredStyleProps}>*</Box>}
+    </TextLabel>
+  );
+});
+
+FormLabel.displayName = 'FormLabel';
+
+export default FormLabel;
diff --git a/packages/react/src/form-control/FormTextarea.js b/packages/react/src/form-control/FormTextarea.js
new file mode 100644
index 0000000000..71a7569690
--- /dev/null
+++ b/packages/react/src/form-control/FormTextarea.js
@@ -0,0 +1,6 @@
+import { Textarea } from '../textarea';
+import withFormControl from './withFormControl';
+
+const FormTextarea = withFormControl(Textarea);
+
+export default FormTextarea;
diff --git a/packages/react/src/form-control/__tests__/FormControl.test.js b/packages/react/src/form-control/__tests__/FormControl.test.js
new file mode 100644
index 0000000000..c50978fe86
--- /dev/null
+++ b/packages/react/src/form-control/__tests__/FormControl.test.js
@@ -0,0 +1,203 @@
+/* @jest-environment jsdom */
+import React, { useState, useCallback } from 'react';
+import { screen } from '@testing-library/react';
+import { render } from '@tonic-ui/react/test-utils/render';
+import userEvent from '@testing-library/user-event';
+import {
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormErrorMessage,
+  FormCharacterCount,
+  FormInput,
+} from '@tonic-ui/react/src';
+
+describe('Form Control ', () => {
+  it('renders basic form control', () => {
+    // Arrange
+    const labelText = 'Username';
+    const placeholder = 'Enter username';
+    const helperText = 'Choose a unique username';
+
+    // Act
+    render(
+      <FormControl>
+        <FormLabel>{labelText}</FormLabel>
+        <FormInput placeholder={placeholder} />
+        <FormHelperText>{helperText}</FormHelperText>
+      </FormControl>
+    );
+
+    // Assert
+    expect(screen.getByLabelText(labelText)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
+    expect(screen.getByText(helperText)).toBeInTheDocument();
+  });
+
+  describe('Form Label', () => {
+    it('displays required indicator', () => {
+      // Arrange
+      const labelText = 'Email';
+      const requiredIndicator = '*';
+
+      // Act
+      render(
+        <FormControl>
+          <FormLabel required>{labelText}</FormLabel>
+          <FormInput placeholder="Enter email" />
+        </FormControl>
+      );
+
+      // Assert
+      expect(screen.getByText(requiredIndicator)).toBeInTheDocument();
+    });
+  });
+
+  describe('error handling', () => {
+    it('displays single error message', () => {
+      // Arrange
+      const errorMessage = 'Password is required';
+      const errors = [errorMessage];
+
+      // Act
+      render(
+        <FormControl error>
+          <FormLabel>Password</FormLabel>
+          <FormInput />
+          <FormErrorMessage errors={errors} />
+        </FormControl>
+      );
+
+      // Assert
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+
+    it('displays multiple error messages as list', () => {
+      // Arrange
+      const errors = ['Error 1', 'Error 2', 'Error 3'];
+
+      // Act
+      render(
+        <FormControl error>
+          <FormLabel>Test</FormLabel>
+          <FormInput />
+          <FormErrorMessage errors={errors} />
+        </FormControl>
+      );
+
+      // Assert
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+      errors.forEach((error) => {
+        expect(screen.getByText(error)).toBeInTheDocument();
+      });
+    });
+
+    it('hides error messages when error=false', () => {
+      // Arrange & Act
+      render(
+        <FormControl error={false}>
+          <FormLabel>Email</FormLabel>
+          <FormInput />
+          <FormErrorMessage errors={['This field is required']} />
+        </FormControl>
+      );
+
+      // Assert
+      expect(
+        screen.queryByText('This field is required')
+      ).not.toBeInTheDocument();
+    });
+
+    it('handles empty errors prop', () => {
+      // Arrange & Act
+      render(
+        <FormControl error>
+          <FormLabel>Test</FormLabel>
+          <FormInput />
+          <FormErrorMessage />
+        </FormControl>
+      );
+
+      // Assert
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('character count', () => {
+    it('displays character count with specified max value', () => {
+      // Arrange & Act
+      render(
+        <FormControl>
+          <FormLabel>Bio</FormLabel>
+          <FormInput />
+          <FormCharacterCount count={0} maxCount={100} />
+        </FormControl>
+      );
+
+      // Assert
+      expect(screen.getByText('0')).toBeInTheDocument();
+      expect(screen.getByText('/100')).toBeInTheDocument();
+    });
+
+    it('displays character count with default max value', () => {
+      // Arrange & Act
+      render(
+        <FormControl>
+          <FormLabel>Bio</FormLabel>
+          <FormInput />
+          <FormCharacterCount count={4} />
+        </FormControl>
+      );
+
+      // Assert
+      expect(screen.getByText('4')).toBeInTheDocument();
+      expect(screen.getByText('/0')).toBeInTheDocument();
+    });
+
+    it('updates character count on input', async () => {
+      // Arrange
+      const user = userEvent.setup();
+      const inputText = 'Hello';
+      const expectedCount = '5';
+      const maxLength = 100;
+
+      const TestComponent = () => {
+        const [value, setValue] = useState('');
+        const handleChange = useCallback((e) => {
+          setValue(e.target.value);
+        }, []);
+        return (
+          <FormControl>
+            <FormLabel>Bio</FormLabel>
+            <FormInput
+              value={value}
+              onChange={handleChange}
+            />
+            <FormCharacterCount count={value.length} maxCount={maxLength} />
+          </FormControl>
+        );
+      };
+
+      render(<TestComponent />);
+      const input = screen.getByRole('textbox');
+
+      // Act
+      await user.type(input, inputText);
+
+      // Assert
+      expect(screen.getByText(expectedCount)).toBeInTheDocument();
+    });
+  });
+
+  it('handles disabled state', () => {
+    render(
+      <FormControl disabled>
+        <FormLabel>Disabled Field</FormLabel>
+        <FormInput />
+      </FormControl>
+    );
+
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+});
diff --git a/packages/react/src/form-control/context.js b/packages/react/src/form-control/context.js
new file mode 100644
index 0000000000..60452cbb8b
--- /dev/null
+++ b/packages/react/src/form-control/context.js
@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const FormControlContext = createContext();
+
+export {
+  FormControlContext,
+};
diff --git a/packages/react/src/form-control/index.js b/packages/react/src/form-control/index.js
new file mode 100644
index 0000000000..b8b71d7d3c
--- /dev/null
+++ b/packages/react/src/form-control/index.js
@@ -0,0 +1,8 @@
+export { default as FormControl } from './FormControl';
+export { default as FormLabel } from './FormLabel';
+export { default as FormInput } from './FormInput';
+export { default as FormTextarea } from './FormTextarea';
+export { default as FormErrorMessage } from './FormErrorMessage';
+export { default as FormHelperText } from './FormHelperText';
+export { default as FormCharacterCount } from './FormCharacterCount';
+export { default as useFormControl } from './useFormControl';
diff --git a/packages/react/src/form-control/styles.js b/packages/react/src/form-control/styles.js
new file mode 100644
index 0000000000..58e41a2359
--- /dev/null
+++ b/packages/react/src/form-control/styles.js
@@ -0,0 +1,127 @@
+import { useColorStyle } from '../color-style';
+import useFormControl from './useFormControl';
+
+const useFormLabelStyle = () => {
+  const { orientation } = useFormControl() || {};
+
+  const styles = {
+    display: 'inline-flex',
+    alignItems: 'center',
+  };
+
+  if (orientation === 'horizontal') {
+    styles.alignSelf = 'center';
+  }
+
+  return styles;
+};
+
+const useFormLabelRequiredStyle = () => {
+  const [colorStyle] = useColorStyle();
+  return {
+    color: colorStyle.color.error,
+    display: 'inline',
+    ml: '1x',
+  };
+};
+
+const useFormHelperTextStyle = () => {
+  const [colorStyle] = useColorStyle();
+  const { orientation } = useFormControl() || {};
+
+  const styles = {
+    color: colorStyle.color.secondary,
+    fontSize: 'sm',
+  };
+
+  if (orientation === 'horizontal') {
+    styles.gridColumn = '2';
+  }
+
+  return styles;
+};
+
+const useFormErrorMessageStyle = () => {
+  const [colorStyle] = useColorStyle();
+  const { orientation } = useFormControl() || {};
+
+  const styles = {
+    color: colorStyle.color.error,
+    fontSize: 'sm',
+  };
+
+  if (orientation === 'horizontal') {
+    styles.gridColumn = '2';
+  }
+
+  return styles;
+};
+
+const useFormErrorMessageListStyle = () => {
+  return {
+    margin: 0,
+    paddingLeft: '6x',
+    listStyleType: 'disc',
+  };
+};
+
+const useFormCharacterCountColors = ({ isOverLimit = false } = {}) => {
+  const [colorStyle] = useColorStyle();
+
+  return {
+    lengthColor: isOverLimit
+      ? colorStyle.color.error
+      : colorStyle.color.secondary,
+    maxColor: colorStyle.color.secondary,
+  };
+};
+
+/**
+ * Generates style properties for the character count element in a form control.
+ *
+ * - If the form control orientation is 'horizontal', sets `gridColumn` to '2'
+ *   to maintain layout consistency when there is no FormHelperText / FormErrorMessage.
+ *
+ * @returns {Object} Style properties for the character count element.
+ */
+const useFormCharacterCountStyle = () => {
+  const { orientation } = useFormControl() || {};
+
+  const styles = {
+    fontSize: 'sm',
+    marginLeft: 'auto',
+  };
+
+  if (orientation === 'horizontal') {
+    styles.gridColumn = '2';
+  }
+
+  return styles;
+};
+
+const useFormControlStyle = ({ orientation } = {}) => {
+  if (orientation === 'horizontal') {
+    return {
+      display: 'grid',
+      gridTemplateColumns: 'auto 1fr',
+      gridRowGap: '1x',
+      gridColumnGap: '3x',
+      alignItems: 'center',
+    };
+  }
+
+  return {
+    gap: '1x',
+  };
+};
+
+export {
+  useFormLabelStyle,
+  useFormLabelRequiredStyle,
+  useFormHelperTextStyle,
+  useFormErrorMessageStyle,
+  useFormErrorMessageListStyle,
+  useFormCharacterCountColors,
+  useFormCharacterCountStyle,
+  useFormControlStyle,
+};
diff --git a/packages/react/src/form-control/useFormControl.js b/packages/react/src/form-control/useFormControl.js
new file mode 100644
index 0000000000..a745a345b9
--- /dev/null
+++ b/packages/react/src/form-control/useFormControl.js
@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { FormControlContext } from './context';
+
+const useFormControl = () => {
+  if (!useContext) {
+    throw new Error('The `useContext` hook is not available with your React version.');
+  }
+
+  const context = useContext(FormControlContext);
+  return context;
+};
+
+export default useFormControl;
diff --git a/packages/react/src/form-control/withFormControl.js b/packages/react/src/form-control/withFormControl.js
new file mode 100644
index 0000000000..1394aa8cdd
--- /dev/null
+++ b/packages/react/src/form-control/withFormControl.js
@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+import useFormControl from './useFormControl';
+
+/**
+ * Default mapper that handles most common use cases
+ */
+const defaultMapper = (context) => ({
+  disabled: context.disabled,
+  error: context.error,
+  readOnly: context.readOnly,
+});
+
+/**
+ * Higher-order component that injects FormControlContext props into a component.
+ * @param {React.ComponentType} Component - The component to wrap
+ * @param {Function} [mapContextToProps] - Function to map context to props
+ * @returns {React.ComponentType} Enhanced component with injected props
+ */
+const withFormControl = (Component, mapContextToProps = defaultMapper) => {
+  const WrappedComponent = forwardRef((props, ref) => {
+    const context = useFormControl();
+
+    let injectedProps = {};
+
+    if (context) {
+      // Use mapper to get basic props
+      injectedProps = mapContextToProps(context) || {};
+
+      // Add accessibility props
+      injectedProps.id = context.fieldId;
+
+      const describedBy = [
+        context.formErrorMessageId,
+        context.formHelperTextId,
+        context.formCharacterCountId,
+      ].filter(Boolean);
+
+      if (describedBy.length > 0) {
+        injectedProps['aria-describedby'] = describedBy.join(' ');
+      }
+    }
+
+    return <Component ref={ref} {...injectedProps} {...props} />;
+  });
+
+  WrappedComponent.displayName = `withFormControl(${
+    Component.displayName || Component.name || 'Component'
+  })`;
+
+  return WrappedComponent;
+};
+
+export default withFormControl;
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index ebb190441f..f28afb9c3f 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -14,6 +14,7 @@ export * from './default-props';
 export * from './divider';
 export * from './drawer';
 export * from './flex';
+export * from './form-control';
 export * from './grid';
 export * from './highlight';
 export * from './icon';

From fd2b8d4c7231e8cce966fd29a440e51356fa0c1d Mon Sep 17 00:00:00 2001
From: cheton <cheton@gmail.com>
Date: Mon, 9 Feb 2026 22:35:16 +0800
Subject: [PATCH 2/2] chore(react-docs): remove experimental form-control
 components

The experimental form-control components are no longer needed after
the feature was promoted to the main package.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../form-control/FormCharacterCount.js        |  39 ---
 .../experiments/form-control/FormControl.js   |  55 -----
 .../form-control/FormErrorMessage.js          |  52 ----
 .../form-control/FormHelperText.js            |  22 --
 .../experiments/form-control/FormInput.js     |  47 ----
 .../experiments/form-control/FormLabel.js     |  35 ---
 .../__tests__/FormControl.test.js             | 232 ------------------
 .../experiments/form-control/context.js       |   7 -
 .../experiments/form-control/index.js         |  17 --
 .../experiments/form-control/styles.js        | 127 ----------
 .../form-control/useFormControl.js            |  13 -
 11 files changed, 646 deletions(-)
 delete mode 100644 packages/react-docs/experiments/form-control/FormCharacterCount.js
 delete mode 100644 packages/react-docs/experiments/form-control/FormControl.js
 delete mode 100644 packages/react-docs/experiments/form-control/FormErrorMessage.js
 delete mode 100644 packages/react-docs/experiments/form-control/FormHelperText.js
 delete mode 100644 packages/react-docs/experiments/form-control/FormInput.js
 delete mode 100644 packages/react-docs/experiments/form-control/FormLabel.js
 delete mode 100644 packages/react-docs/experiments/form-control/__tests__/FormControl.test.js
 delete mode 100644 packages/react-docs/experiments/form-control/context.js
 delete mode 100644 packages/react-docs/experiments/form-control/index.js
 delete mode 100644 packages/react-docs/experiments/form-control/styles.js
 delete mode 100644 packages/react-docs/experiments/form-control/useFormControl.js

diff --git a/packages/react-docs/experiments/form-control/FormCharacterCount.js b/packages/react-docs/experiments/form-control/FormCharacterCount.js
deleted file mode 100644
index 05c3881f8e..0000000000
--- a/packages/react-docs/experiments/form-control/FormCharacterCount.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Text, Flex } from '@tonic-ui/react';
-import { useId } from '@tonic-ui/react-hooks';
-import { ensureString } from 'ensure-type';
-import React, { forwardRef } from 'react';
-import useFormControl from './useFormControl';
-import {
-  useFormCharacterCountColors,
-  useFormCharacterCountStyle,
-} from './styles';
-
-const FormCharacterCount = forwardRef((
-  {
-    value = '',
-    max = 0,
-    ...rest
-  },
-  ref
-) => {
-  const defaultId = useId();
-  const { formCharacterCountId } = useFormControl() ?? {};
-  const id = formCharacterCountId ?? defaultId;
-  const characterCount = ensureString(value).length;
-  const isOverLimit = characterCount > max;
-  const { lengthColor, maxColor } = useFormCharacterCountColors({
-    isOverLimit,
-  });
-  const styleProps = useFormCharacterCountStyle();
-
-  return (
-    <Flex ref={ref} id={id} {...styleProps} {...rest}>
-      <Text color={lengthColor}>{characterCount}</Text>
-      <Text color={maxColor}>/{max}</Text>
-    </Flex>
-  );
-});
-
-FormCharacterCount.displayName = 'FormCharacterCount';
-
-export default FormCharacterCount;
diff --git a/packages/react-docs/experiments/form-control/FormControl.js b/packages/react-docs/experiments/form-control/FormControl.js
deleted file mode 100644
index ceda9015c3..0000000000
--- a/packages/react-docs/experiments/form-control/FormControl.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Stack } from '@tonic-ui/react';
-import { useId } from '@tonic-ui/react-hooks';
-import React, { forwardRef, useMemo } from 'react';
-import { FormControlContext } from './context';
-import { useFormControlStyle } from './styles';
-
-const FormControl = forwardRef((
-  {
-    children,
-    disabled = false,
-    error = false,
-    readOnly = false,
-    orientation = 'vertical',
-    ...rest
-  },
-  ref
-) => {
-  const styleProps = useFormControlStyle({ orientation });
-  const formCharacterCountId = useId();
-  const formErrorMessageId = useId();
-  const formHelperTextId = useId();
-  const formInputId = useId();
-
-  const contextValue = useMemo(() => ({
-    disabled,
-    error,
-    readOnly,
-    formCharacterCountId,
-    formErrorMessageId,
-    formHelperTextId,
-    formInputId,
-    orientation,
-  }), [
-    disabled,
-    error,
-    readOnly,
-    formCharacterCountId,
-    formErrorMessageId,
-    formHelperTextId,
-    formInputId,
-    orientation,
-  ]);
-
-  return (
-    <FormControlContext.Provider value={contextValue}>
-      <Stack ref={ref} {...styleProps} {...rest}>
-        {children}
-      </Stack>
-    </FormControlContext.Provider>
-  );
-});
-
-FormControl.displayName = 'FormControl';
-
-export default FormControl;
diff --git a/packages/react-docs/experiments/form-control/FormErrorMessage.js b/packages/react-docs/experiments/form-control/FormErrorMessage.js
deleted file mode 100644
index a40eaca863..0000000000
--- a/packages/react-docs/experiments/form-control/FormErrorMessage.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Text, Box } from '@tonic-ui/react';
-import { useId } from '@tonic-ui/react-hooks';
-import React, { forwardRef } from 'react';
-import { ensureArray } from 'ensure-type';
-import useFormControl from './useFormControl';
-import {
-  useFormErrorMessageStyle,
-  useFormErrorMessageListStyle,
-} from './styles';
-
-const FormErrorMessage = forwardRef(({ errors = [], ...rest }, ref) => {
-  const defaultId = useId();
-  const {
-    error,
-    formErrorMessageId,
-  } = useFormControl() ?? {};
-  const id = formErrorMessageId ?? defaultId;
-  const styleProps = useFormErrorMessageStyle();
-  const listStyleProps = useFormErrorMessageListStyle();
-
-  if (!error) {
-    return null;
-  }
-
-  const normalizedErrors = ensureArray(errors);
-
-  if (normalizedErrors.length === 0) {
-    return null;
-  }
-
-  const isSingleError = normalizedErrors.length === 1;
-
-  return (
-    <Text ref={ref} id={id} role="alert" {...styleProps} {...rest}>
-      {isSingleError ? (
-        normalizedErrors[0]
-      ) : (
-        <Box as="ul" {...listStyleProps}>
-          {normalizedErrors.map((error, index) => (
-            <Box as="li" key={index}>
-              {error}
-            </Box>
-          ))}
-        </Box>
-      )}
-    </Text>
-  );
-});
-
-FormErrorMessage.displayName = 'FormErrorMessage';
-
-export default FormErrorMessage;
diff --git a/packages/react-docs/experiments/form-control/FormHelperText.js b/packages/react-docs/experiments/form-control/FormHelperText.js
deleted file mode 100644
index dd815ff720..0000000000
--- a/packages/react-docs/experiments/form-control/FormHelperText.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Text } from '@tonic-ui/react';
-import { useId } from '@tonic-ui/react-hooks';
-import React, { forwardRef } from 'react';
-import useFormControl from './useFormControl';
-import { useFormHelperTextStyle } from './styles';
-
-const FormHelperText = forwardRef(({ children, ...rest }, ref) => {
-  const defaultId = useId();
-  const { formHelperTextId } = useFormControl() ?? {};
-  const id = formHelperTextId ?? defaultId;
-  const styleProps = useFormHelperTextStyle();
-
-  return (
-    <Text ref={ref} id={id} role="note" {...styleProps} {...rest}>
-      {children}
-    </Text>
-  );
-});
-
-FormHelperText.displayName = 'FormHelperText';
-
-export default FormHelperText;
diff --git a/packages/react-docs/experiments/form-control/FormInput.js b/packages/react-docs/experiments/form-control/FormInput.js
deleted file mode 100644
index d9bd4da30d..0000000000
--- a/packages/react-docs/experiments/form-control/FormInput.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Input } from '@tonic-ui/react';
-import { useId } from '@tonic-ui/react-hooks';
-import { ariaAttr } from '@tonic-ui/utils';
-import React, { forwardRef } from 'react';
-import useFormControl from './useFormControl';
-
-const FormInput = forwardRef((props, ref) => {
-  const defaultId = useId();
-  const {
-    disabled,
-    error,
-    readOnly,
-
-    // IDs for associated form control elements
-    formInputId,
-    formErrorMessageId,
-    formHelperTextId,
-    formCharacterCountId,
-  } = useFormControl() ?? {};
-  const id = formInputId ?? defaultId;
-  const describedByIds = [];
-  if (formErrorMessageId) {
-    describedByIds.push(formErrorMessageId);
-  }
-  if (formHelperTextId) {
-    describedByIds.push(formHelperTextId);
-  }
-  if (formCharacterCountId) {
-    describedByIds.push(formCharacterCountId);
-  }
-
-  return (
-    <Input
-      ref={ref}
-      id={id}
-      aria-describedby={ariaAttr(describedByIds.join(' '))}
-      disabled={disabled}
-      error={error}
-      readOnly={readOnly}
-      {...props}
-    />
-  );
-});
-
-FormInput.displayName = 'FormInput';
-
-export default FormInput;
diff --git a/packages/react-docs/experiments/form-control/FormLabel.js b/packages/react-docs/experiments/form-control/FormLabel.js
deleted file mode 100644
index 6dc6f9cfab..0000000000
--- a/packages/react-docs/experiments/form-control/FormLabel.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { TextLabel, Box } from '@tonic-ui/react';
-import { ariaAttr } from '@tonic-ui/utils';
-import React, { forwardRef } from 'react';
-import useFormControl from './useFormControl';
-import { useFormLabelStyle, useFormLabelRequiredStyle } from './styles';
-
-const FormLabel = forwardRef(({
-  children,
-  required = false,
-  ...rest
-}, ref) => {
-  const { formInputId } = useFormControl() ?? {};
-  const labelStyleProps = useFormLabelStyle();
-  const requiredStyleProps = useFormLabelRequiredStyle();
-  const ariaProps = {
-    'aria-required': ariaAttr(required),
-  };
-
-  return (
-    <TextLabel
-      ref={ref}
-      htmlFor={formInputId}
-      {...ariaProps}
-      {...labelStyleProps}
-      {...rest}
-    >
-      {children}
-      {required && <Box {...requiredStyleProps}>*</Box>}
-    </TextLabel>
-  );
-});
-
-FormLabel.displayName = 'FormLabel';
-
-export default FormLabel;
diff --git a/packages/react-docs/experiments/form-control/__tests__/FormControl.test.js b/packages/react-docs/experiments/form-control/__tests__/FormControl.test.js
deleted file mode 100644
index f742ed151b..0000000000
--- a/packages/react-docs/experiments/form-control/__tests__/FormControl.test.js
+++ /dev/null
@@ -1,232 +0,0 @@
-/* @jest-environment jsdom */
-import userEvent from '@testing-library/user-event';
-import { Input } from '@tonic-ui/react';
-import { ariaAttr } from '@tonic-ui/utils';
-import React, { useState } from 'react';
-import { render, screen } from '../../../test-utils/render';
-import {
-  FormControl,
-  FormLabel,
-  FormHelperText,
-  FormErrorMessage,
-  FormCharacterCount,
-} from '../index';
-import useFormControl from '../useFormControl';
-
-const FormInput = React.forwardRef((props, ref) => {
-  const {
-    disabled,
-    error,
-    readOnly,
-    formCharacterCountId,
-    formErrorMessageId,
-    formHelperTextId,
-    formInputId,
-  } = useFormControl();
-  const ariaDescribedby = [
-    formCharacterCountId,
-    formErrorMessageId,
-    formHelperTextId,
-  ].filter(Boolean).join(' ');
-
-  return (
-    <Input
-      ref={ref}
-      id={formInputId}
-      aria-describedby={ariaAttr(ariaDescribedby)}
-      disabled={disabled}
-      error={error}
-      readOnly={readOnly}
-      {...props}
-    />
-  );
-});
-
-FormInput.displayName = 'FormInput';
-
-describe('Form Control ', () => {
-  it('renders basic form control', () => {
-    // Arrange
-    const labelText = 'Username';
-    const placeholder = 'Enter username';
-    const helperText = 'Choose a unique username';
-
-    // Act
-    render(
-      <FormControl>
-        <FormLabel>{labelText}</FormLabel>
-        <FormInput placeholder={placeholder} />
-        <FormHelperText>{helperText}</FormHelperText>
-      </FormControl>
-    );
-
-    // Assert
-    expect(screen.getByLabelText(labelText)).toBeInTheDocument();
-    expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
-    expect(screen.getByText(helperText)).toBeInTheDocument();
-  });
-
-  describe('Form Label', () => {
-    it('displays required indicator', () => {
-      // Arrange
-      const labelText = 'Email';
-      const requiredIndicator = '*';
-
-      // Act
-      render(
-        <FormControl>
-          <FormLabel required>{labelText}</FormLabel>
-          <FormInput placeholder="Enter email" />
-        </FormControl>
-      );
-
-      // Assert
-      expect(screen.getByText(requiredIndicator)).toBeInTheDocument();
-    });
-  });
-
-  describe('error handling', () => {
-    it('displays single error message', () => {
-      // Arrange
-      const errorMessage = 'Password is required';
-      const errors = [errorMessage];
-
-      // Act
-      render(
-        <FormControl error>
-          <FormLabel>Password</FormLabel>
-          <FormInput />
-          <FormErrorMessage errors={errors} />
-        </FormControl>
-      );
-
-      // Assert
-      expect(screen.getByText(errorMessage)).toBeInTheDocument();
-      expect(screen.getByRole('alert')).toBeInTheDocument();
-    });
-
-    it('displays multiple error messages as list', () => {
-      // Arrange
-      const errors = ['Error 1', 'Error 2', 'Error 3'];
-
-      // Act
-      render(
-        <FormControl error>
-          <FormLabel>Test</FormLabel>
-          <FormInput />
-          <FormErrorMessage errors={errors} />
-        </FormControl>
-      );
-
-      // Assert
-      expect(screen.getByRole('alert')).toBeInTheDocument();
-      errors.forEach((error) => {
-        expect(screen.getByText(error)).toBeInTheDocument();
-      });
-    });
-
-    it('hides error messages when error=false', () => {
-      // Arrange & Act
-      render(
-        <FormControl error={false}>
-          <FormLabel>Email</FormLabel>
-          <FormInput />
-          <FormErrorMessage errors={['This field is required']} />
-        </FormControl>
-      );
-
-      // Assert
-      expect(
-        screen.queryByText('This field is required')
-      ).not.toBeInTheDocument();
-    });
-
-    it('handles empty errors prop', () => {
-      // Arrange & Act
-      render(
-        <FormControl error>
-          <FormLabel>Test</FormLabel>
-          <FormInput />
-          <FormErrorMessage />
-        </FormControl>
-      );
-
-      // Assert
-      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('character count', () => {
-    it('displays character count with specified max value', () => {
-      // Arrange & Act
-      render(
-        <FormControl>
-          <FormLabel>Bio</FormLabel>
-          <FormInput />
-          <FormCharacterCount value="" max={100} />
-        </FormControl>
-      );
-
-      // Assert
-      expect(screen.getByText('0')).toBeInTheDocument();
-      expect(screen.getByText('/100')).toBeInTheDocument();
-    });
-
-    it('displays character count with default max value', () => {
-      // Arrange & Act
-      render(
-        <FormControl>
-          <FormLabel>Bio</FormLabel>
-          <FormInput />
-          <FormCharacterCount value="test" />
-        </FormControl>
-      );
-
-      // Assert
-      expect(screen.getByText('4')).toBeInTheDocument();
-      expect(screen.getByText('/0')).toBeInTheDocument();
-    });
-
-    it('updates character count on input', async () => {
-      // Arrange
-      const user = userEvent.setup();
-      const inputText = 'Hello';
-      const expectedCount = '5';
-      const maxLength = 100;
-
-      const TestComponent = () => {
-        const [value, setValue] = useState('');
-        return (
-          <FormControl>
-            <FormLabel>Bio</FormLabel>
-            <FormInput
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-            />
-            <FormCharacterCount value={value} max={maxLength} />
-          </FormControl>
-        );
-      };
-
-      render(<TestComponent />);
-      const input = screen.getByRole('textbox');
-
-      // Act
-      await user.type(input, inputText);
-
-      // Assert
-      expect(screen.getByText(expectedCount)).toBeInTheDocument();
-    });
-  });
-
-  it('handles disabled state', () => {
-    render(
-      <FormControl disabled>
-        <FormLabel>Disabled Field</FormLabel>
-        <FormInput />
-      </FormControl>
-    );
-
-    expect(screen.getByRole('textbox')).toBeDisabled();
-  });
-});
diff --git a/packages/react-docs/experiments/form-control/context.js b/packages/react-docs/experiments/form-control/context.js
deleted file mode 100644
index 60452cbb8b..0000000000
--- a/packages/react-docs/experiments/form-control/context.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createContext } from 'react';
-
-const FormControlContext = createContext();
-
-export {
-  FormControlContext,
-};
diff --git a/packages/react-docs/experiments/form-control/index.js b/packages/react-docs/experiments/form-control/index.js
deleted file mode 100644
index 5e9bd43b7d..0000000000
--- a/packages/react-docs/experiments/form-control/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import FormCharacterCount from './FormCharacterCount';
-import FormControl from './FormControl';
-import FormErrorMessage from './FormErrorMessage';
-import FormHelperText from './FormHelperText';
-import FormInput from './FormInput';
-import FormLabel from './FormLabel';
-import useFormControl from './useFormControl';
-
-export {
-  FormCharacterCount,
-  FormControl,
-  FormErrorMessage,
-  FormHelperText,
-  FormInput,
-  FormLabel,
-  useFormControl,
-};
diff --git a/packages/react-docs/experiments/form-control/styles.js b/packages/react-docs/experiments/form-control/styles.js
deleted file mode 100644
index 0b4bb847ed..0000000000
--- a/packages/react-docs/experiments/form-control/styles.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import { useColorStyle } from '@tonic-ui/react';
-import useFormControl from './useFormControl';
-
-const useFormLabelStyle = () => {
-  const { orientation } = useFormControl() || {};
-
-  const styles = {
-    display: 'inline-flex',
-    alignItems: 'center',
-  };
-
-  if (orientation === 'horizontal') {
-    styles.alignSelf = 'center';
-  }
-
-  return styles;
-};
-
-const useFormLabelRequiredStyle = () => {
-  const [colorStyle] = useColorStyle();
-  return {
-    color: colorStyle.color.error,
-    display: 'inline',
-    ml: '1x',
-  };
-};
-
-const useFormHelperTextStyle = () => {
-  const [colorStyle] = useColorStyle();
-  const { orientation } = useFormControl() || {};
-
-  const styles = {
-    color: colorStyle.color.secondary,
-    fontSize: 'sm',
-  };
-
-  if (orientation === 'horizontal') {
-    styles.gridColumn = '2';
-  }
-
-  return styles;
-};
-
-const useFormErrorMessageStyle = () => {
-  const [colorStyle] = useColorStyle();
-  const { orientation } = useFormControl() || {};
-
-  const styles = {
-    color: colorStyle.color.error,
-    fontSize: 'sm',
-  };
-
-  if (orientation === 'horizontal') {
-    styles.gridColumn = '2';
-  }
-
-  return styles;
-};
-
-const useFormErrorMessageListStyle = () => {
-  return {
-    margin: 0,
-    paddingLeft: '6x',
-    listStyleType: 'disc',
-  };
-};
-
-const useFormCharacterCountColors = ({ isOverLimit = false } = {}) => {
-  const [colorStyle] = useColorStyle();
-
-  return {
-    lengthColor: isOverLimit
-      ? colorStyle.color.error
-      : colorStyle.color.secondary,
-    maxColor: colorStyle.color.secondary,
-  };
-};
-
-/**
- * Generates style properties for the character count element in a form control.
- *
- * - If the form control orientation is 'horizontal', sets `gridColumn` to '2'
- *   to maintain layout consistency when there is no FormHelperText / FormErrorMessage.
- *
- * @returns {Object} Style properties for the character count element.
- */
-const useFormCharacterCountStyle = () => {
-  const { orientation } = useFormControl() || {};
-
-  const styles = {
-    fontSize: 'sm',
-    justifyContent: 'flex-end',
-  };
-
-  if (orientation === 'horizontal') {
-    styles.gridColumn = '2';
-  }
-
-  return styles;
-};
-
-const useFormControlStyle = ({ orientation } = {}) => {
-  if (orientation === 'horizontal') {
-    return {
-      display: 'grid',
-      gridTemplateColumns: 'auto 1fr',
-      gridRowGap: '1x',
-      gridColumnGap: '3x',
-      alignItems: 'center',
-    };
-  }
-
-  return {
-    gap: '1x',
-  };
-};
-
-export {
-  useFormLabelStyle,
-  useFormLabelRequiredStyle,
-  useFormHelperTextStyle,
-  useFormErrorMessageStyle,
-  useFormErrorMessageListStyle,
-  useFormCharacterCountColors,
-  useFormCharacterCountStyle,
-  useFormControlStyle,
-};
diff --git a/packages/react-docs/experiments/form-control/useFormControl.js b/packages/react-docs/experiments/form-control/useFormControl.js
deleted file mode 100644
index a745a345b9..0000000000
--- a/packages/react-docs/experiments/form-control/useFormControl.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useContext } from 'react';
-import { FormControlContext } from './context';
-
-const useFormControl = () => {
-  if (!useContext) {
-    throw new Error('The `useContext` hook is not available with your React version.');
-  }
-
-  const context = useContext(FormControlContext);
-  return context;
-};
-
-export default useFormControl;