@transferwise/components 0.0.0-experimental-d087eac → 0.0.0-experimental-186b26b

package/build/types/moneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;;;;;;;AAqapC,wBAA2F"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;;;;;;;AAoapC,wBAA2F"}

package/build/types/test-utils/index.d.ts

@@ -30,6 +30,7 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
         "neptune.Expander.expandAriaLabel": string;
         "neptune.ExpressiveMoneyInput.currency.search.placeholder": string;
         "neptune.ExpressiveMoneyInput.currency.select.currency": string;
+        "neptune.Field.characterCount": string;
         "neptune.FlowNavigation.back": string;
         "neptune.Info.ariaLabel": string;
         "neptune.Label.optional": string;
@@ -117,6 +118,7 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
         "neptune.Expander.expandAriaLabel": string;
         "neptune.ExpressiveMoneyInput.currency.search.placeholder": string;
         "neptune.ExpressiveMoneyInput.currency.select.currency": string;
+        "neptune.Field.characterCount": string;
         "neptune.FlowNavigation.back": string;
         "neptune.Info.ariaLabel": string;
         "neptune.Label.optional": string;

package/build/types/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-d087eac",
+  "version": "0.0.0-experimental-186b26b",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/field/Field.css

@@ -1,13 +1,27 @@
-.np-field-control,
-.np-field__prompt {
+.np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
+.np-field-validation {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  gap: 8px;
+  gap: var(--size-8);
+}
+.np-field-textarea-char-counter {
+  margin-left: auto;
+  padding: 4px 0;
+  padding: var(--size-4) 0;
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .np-field .form-group--typeahead[class],
 .np-field .np-checkbox-label[class] {
   margin-bottom: 0;
 }
-.np-field:has(.wds-radio-group) .np-field__prompt {
+.np-field:has(.wds-radio-group) .np-field-validation {
   margin-top: 12px;
   margin-top: var(--size-12);
 }

package/src/field/Field.less

@@ -1,16 +1,28 @@
 .np-field {
-  &-control,
-  &__prompt {
+  &-control {
     margin-top: var(--size-4);
   }
 
+  &-validation {
+    display: flex;
+    align-items: flex-start;
+    margin-top: var(--size-4);
+    gap: var(--size-8);
+  }
+
+  &-textarea-char-counter {
+    margin-left: auto;
+    padding: var(--size-4) 0;
+    color: var(--color-content-tertiary);
+  }
+
   // @FIXME space between individual fields should be 24px, while some older inputs
   //        inject extraneous space.
   .form-group--typeahead[class],
   .np-checkbox-label[class] {
     margin-bottom: 0;
   }
-  &:has(.wds-radio-group) &__prompt {
+  &:has(.wds-radio-group) &-validation {
     margin-top: var(--size-12);
   }
 }

package/src/field/Field.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  characterCount: {
+    id: 'neptune.Field.characterCount',
+    defaultMessage: '{current} of {max} characters used',
+  },
+});

package/src/field/Field.story.tsx

@@ -84,7 +84,11 @@ export const Basic = (args: FieldProps) => {
           messageIconLabel={args.messageIconLabel}
           messageLoading={args.messageLoading}
         >
-          <TextArea />
+          <TextArea
+            maxLength={200}
+            value={value}
+            onChange={({ target }) => setValue(target.value)}
+          />
         </Field>
 
         <Field

package/src/field/Field.test.tsx

@@ -1,5 +1,6 @@
 import Info from '../info/Info';
 import { Input } from '../inputs/Input';
+import { TextArea } from '../inputs/TextArea';
 import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
 
 import { Field } from './Field';
@@ -163,4 +164,93 @@ describe('Field', () => {
     expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
     expect(screen.getByText('Processing your request')).toBeInTheDocument();
   });
+
+  describe('TextArea character count', () => {
+    it('renders counter when TextArea has maxLength', () => {
+      render(
+        <Field label="Message">
+          <TextArea maxLength={200} value="hello" onChange={() => {}} />
+        </Field>,
+      );
+
+      expect(screen.getByText('5/200')).toBeInTheDocument();
+    });
+
+    it('does not render counter when TextArea has no maxLength', () => {
+      render(
+        <Field label="Message">
+          <TextArea value="hello" onChange={() => {}} />
+        </Field>,
+      );
+
+      expect(screen.queryByText(/\/\d+/)).not.toBeInTheDocument();
+    });
+
+    it('includes counter id in aria-describedby of the textarea', () => {
+      render(
+        <Field label="Message">
+          <TextArea maxLength={200} value="hello" onChange={() => {}} />
+        </Field>,
+      );
+
+      const textarea = screen.getByRole('textbox');
+      const counter = screen.getByText('5/200');
+      expect(textarea).toHaveAttribute('aria-describedby', expect.stringContaining(counter.id));
+    });
+
+    it('does not have role=status below 80% threshold', () => {
+      render(
+        <Field label="Message">
+          <TextArea maxLength={200} value="short" onChange={() => {}} />
+        </Field>,
+      );
+
+      const counter = screen.getByText('5/200');
+      expect(counter).not.toHaveAttribute('role');
+      expect(counter).not.toHaveAttribute('aria-live');
+    });
+
+    it('has role=status and aria-live=polite at 80% threshold', () => {
+      const value = 'x'.repeat(160);
+      render(
+        <Field label="Message">
+          <TextArea maxLength={200} value={value} onChange={() => {}} />
+        </Field>,
+      );
+
+      const counter = screen.getByText('160/200');
+      expect(counter).toHaveAttribute('role', 'status');
+      expect(counter).toHaveAttribute('aria-live', 'polite');
+      expect(counter).toHaveAttribute('aria-atomic', 'true');
+    });
+
+    it('updates counter when text changes', () => {
+      const { rerender } = render(
+        <Field label="Message">
+          <TextArea maxLength={200} value="hi" onChange={() => {}} />
+        </Field>,
+      );
+
+      expect(screen.getByText('2/200')).toBeInTheDocument();
+
+      rerender(
+        <Field label="Message">
+          <TextArea maxLength={200} value="hello world" onChange={() => {}} />
+        </Field>,
+      );
+
+      expect(screen.getByText('11/200')).toBeInTheDocument();
+    });
+
+    it('provides accessible aria-label on the counter', () => {
+      render(
+        <Field label="Message">
+          <TextArea maxLength={200} value="hello" onChange={() => {}} />
+        </Field>,
+      );
+
+      const counter = screen.getByText('5/200');
+      expect(counter).toHaveAttribute('aria-label', '5 of 200 characters used');
+    });
+  });
 });

package/src/field/Field.tsx

@@ -1,9 +1,14 @@
 import { clsx } from 'clsx';
-import { useId, useRef } from 'react';
+import { useCallback, useId, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 
+import Body from '../body';
 import { Sentiment } from '../common';
+import messages from './Field.messages';
 import { InlinePrompt, type InlinePromptProps } from '../prompt';
 import {
+  TextareaCharacterCountProvider,
+  type TextareaCharacterCountState,
   FieldLabelContextProvider,
   InputDescribedByProvider,
   InputIdContextProvider,
@@ -54,6 +59,7 @@ export const Field = ({
   children,
   ...props
 }: FieldProps) => {
+  const { formatMessage } = useIntl();
   const labelRef = useRef<HTMLLabelElement>(null);
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
   const message = propMessage || props.error;
@@ -66,6 +72,18 @@ export const Field = ({
 
   const messageId = useId();
   const descriptionId = useId();
+  const textareaCharCounterId = useId();
+
+  const [textareaCharacterCount, setTextareaCharacterCount] =
+    useState<TextareaCharacterCountState>(null);
+  const handleTextareaCharacterCount = useCallback(
+    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),
+    [],
+  );
+
+  const isNearCharLimit =
+    textareaCharacterCount != null &&
+    textareaCharacterCount.current >= textareaCharacterCount.max * 0.8;
 
   /**
    * form control can have multiple messages to describe it,
@@ -79,6 +97,9 @@ export const Field = ({
     if (message) {
       messageIds.push(messageId);
     }
+    if (textareaCharacterCount) {
+      messageIds.push(textareaCharCounterId);
+    }
     return messageIds.length > 0 ? messageIds.join(' ') : undefined;
   }
 
@@ -87,43 +108,69 @@ export const Field = ({
       <InputIdContextProvider value={inputId}>
         <InputDescribedByProvider value={ariaDescribedbyByIds()}>
           <InputInvalidProvider value={hasError}>
-            <div
-              className={clsx(
-                'np-field form-group d-block',
-                {
-                  'has-success': sentiment === Sentiment.POSITIVE,
-                  'has-warning': sentiment === Sentiment.WARNING,
-                  'has-error': hasError,
-                  'has-info': sentiment === Sentiment.NEUTRAL,
-                },
-                className,
-              )}
-            >
-              {label != null ? (
-                <>
-                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>
-                    {required ? label : <Label.Optional>{label}</Label.Optional>}
-                  </Label>
-                  <Label.Description id={descriptionId}>{description}</Label.Description>
-                  <div className="np-field-control">{children}</div>
-                </>
-              ) : (
-                children
-              )}
+            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>
+              <div
+                className={clsx(
+                  'np-field form-group d-block',
+                  {
+                    'has-success': sentiment === Sentiment.POSITIVE,
+                    'has-warning': sentiment === Sentiment.WARNING,
+                    'has-error': hasError,
+                    'has-info': sentiment === Sentiment.NEUTRAL,
+                  },
+                  className,
+                )}
+              >
+                {label != null ? (
+                  <>
+                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>
+                      {required ? label : <Label.Optional>{label}</Label.Optional>}
+                    </Label>
+                    <Label.Description id={descriptionId}>{description}</Label.Description>
+                    <div className="np-field-control">{children}</div>
+                  </>
+                ) : (
+                  children
+                )}
 
-              {message && (
-                <InlinePrompt
-                  sentiment={sentiment}
-                  id={messageId}
-                  mediaLabel={messageIconLabel}
-                  className="np-field__prompt"
-                  loading={messageLoading}
-                  width="full"
-                >
-                  {message}
-                </InlinePrompt>
-              )}
-            </div>
+                {(message || textareaCharacterCount) && (
+                  <div className="np-field-validation">
+                    {message && (
+                      <InlinePrompt
+                        sentiment={sentiment}
+                        id={messageId}
+                        mediaLabel={messageIconLabel}
+                        className="np-field__prompt"
+                        loading={messageLoading}
+                        width="full"
+                      >
+                        {message}
+                      </InlinePrompt>
+                    )}
+                    {textareaCharacterCount && (
+                      <Body
+                        as="span"
+                        id={textareaCharCounterId}
+                        {...(isNearCharLimit
+                          ? {
+                              role: 'status' as const,
+                              'aria-live': 'polite' as const,
+                              'aria-atomic': 'true' as const,
+                            }
+                          : {})}
+                        aria-label={formatMessage(messages.characterCount, {
+                          current: textareaCharacterCount.current,
+                          max: textareaCharacterCount.max,
+                        })}
+                        className="np-field-textarea-char-counter"
+                      >
+                        {textareaCharacterCount.current}/{textareaCharacterCount.max}
+                      </Body>
+                    )}
+                  </div>
+                )}
+              </div>
+            </TextareaCharacterCountProvider>
           </InputInvalidProvider>
         </InputDescribedByProvider>
       </InputIdContextProvider>

package/src/i18n/en.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
+  "neptune.Field.characterCount": "{current} of {max} characters used",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
   "neptune.Label.optional": "(Optional)",

package/src/inputs/TextArea.story.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Field } from '../field/Field';
+import { Sentiment } from '../common';
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Forms/TextArea',
+  component: TextArea,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const Basic: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Field label="Message" required={false}>
+  <TextArea
+    maxLength={200}
+    value={value}
+    onChange={({ target }) => setValue(target.value)}
+  />
+</Field>`,
+      },
+    },
+  },
+};
+
+export const WithError: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field
+        label="Message"
+        required={false}
+        sentiment={Sentiment.NEGATIVE}
+        message="You have exceeded the character limit"
+      >
+        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+};

package/src/inputs/TextArea.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
 import { inputClassNameBase } from './_common';
-import { useInputAttributes } from './contexts';
+import { useTextareaCharacterCount, useInputAttributes } from './contexts';
 
 export interface TextAreaProps extends Merge<
   React.ComponentPropsWithRef<'textarea'>,
@@ -13,17 +13,38 @@ export interface TextAreaProps extends Merge<
 > {}
 
 export const TextArea = forwardRef(function TextArea(
-  { className, ...restProps }: TextAreaProps,
+  { className, maxLength, ...restProps }: TextAreaProps,
   reference: React.ForwardedRef<HTMLTextAreaElement | null>,
 ) {
   const inputAttributes = useInputAttributes();
+  const value = restProps.value ?? restProps.defaultValue ?? '';
+  const currentLength = getGraphemeLength(typeof value === 'string' ? value : String(value));
+
+  useTextareaCharacterCount(currentLength, maxLength);
 
   return (
     <textarea
       ref={reference}
       className={clsx(className, inputClassNameBase(), 'np-text-area')}
+      maxLength={maxLength}
       {...inputAttributes}
       {...restProps}
     />
   );
 });
+
+const segmenter =
+  typeof Intl.Segmenter === 'function'
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : undefined;
+
+function getGraphemeLength(str: string): number {
+  if (segmenter) {
+    let count = 0;
+    for (const _ of segmenter.segment(str)) {
+      count += 1;
+    }
+    return count;
+  }
+  return Array.from(str).length;
+}

package/src/inputs/contexts.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useEffect } from 'react';
 
 type FieldLabelContextType = {
   id?: string;
@@ -36,6 +36,23 @@ export function useFieldLabelRef() {
   return useContext(FieldLabelContext)?.ref;
 }
 
+export type TextareaCharacterCountState = { current: number; max: number } | null;
+
+const TextareaCharacterCountContext = createContext<
+  ((state: TextareaCharacterCountState) => void) | undefined
+>(undefined);
+export const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
+
+export function useTextareaCharacterCount(current: number, max: number | undefined) {
+  const setCharacterCount = useContext(TextareaCharacterCountContext);
+  useEffect(() => {
+    if (setCharacterCount && max != null) {
+      setCharacterCount({ current, max });
+      return () => setCharacterCount(null);
+    }
+  }, [setCharacterCount, current, max]);
+}
+
 export interface WithInputAttributesProps {
   inputAttributes: ReturnType<typeof useInputAttributes>;
 }

package/src/main.css

@@ -30193,18 +30193,34 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
 
-.np-field-control,
-.np-field__prompt {
+.np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
 
+.np-field-validation {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  gap: 8px;
+  gap: var(--size-8);
+}
+
+.np-field-textarea-char-counter {
+  margin-left: auto;
+  padding: 4px 0;
+  padding: var(--size-4) 0;
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+
 .np-field .form-group--typeahead[class],
 .np-field .np-checkbox-label[class] {
   margin-bottom: 0;
 }
 
-.np-field:has(.wds-radio-group) .np-field__prompt {
+.np-field:has(.wds-radio-group) .np-field-validation {
   margin-top: 12px;
   margin-top: var(--size-12);
 }

package/src/moneyInput/MoneyInput.story.tsx

@@ -164,26 +164,6 @@ export const WithDecimals: Story = {
   },
 };
 
-export const DisabledOptions: Story = {
-  args: {
-    currencies: [
-      { header: 'Popular currencies' },
-      exampleCurrency.eur,
-      exampleCurrency.gbp,
-      { ...exampleCurrency.usd, disabled: true },
-      { header: 'All currencies' },
-      exampleCurrency.aud,
-      { ...exampleCurrency.cny, disabled: true },
-      exampleCurrency.jpy,
-    ],
-    selectedCurrency: exampleCurrency.eur,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('combobox'));
-  },
-};
-
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {

package/src/moneyInput/MoneyInput.test.story.tsx

@@ -103,36 +103,6 @@ export const SmoothScrollReset: Story = {
   },
 };
 
-export const DisabledOptions: Story = {
-  args: {
-    currencies: [
-      {
-        value: 'EUR',
-        label: 'EUR',
-        note: 'Euro',
-        currency: 'eur',
-      },
-      {
-        value: 'USD',
-        label: 'USD',
-        note: 'United States dollar',
-        currency: 'usd',
-        disabled: true,
-      },
-      {
-        value: 'GBP',
-        label: 'GBP',
-        note: 'British pound',
-        currency: 'gbp',
-      },
-    ],
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('combobox'));
-  },
-};
-
 export const WithDecimals: Story = {
   args: {
     currencies: [],