From bbc4ccb1afe1b773b4bfe4c20b2b8c3ec1bdf7a9 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Mon, 15 Jan 2024 14:17:25 +0000
Subject: [PATCH] Tokenized input next (#2798)

Co-authored-by: lilyvc <45168453+lilyvc@users.noreply.github.com>
---
 .changeset/lucky-worms-punch.md               |  11 +
 .../form-field-context/FormFieldContext.ts    |   2 +-
 .../TokenizedInputNext.cy.tsx                 | 179 +++++
 packages/lab/src/index.ts                     |   1 +
 .../TokenizedInputNext.css                    | 225 ++++++
 .../TokenizedInputNext.tsx                    | 376 ++++++++++
 .../lab/src/tokenized-input-next/index.ts     |   2 +
 .../internal/InputPill.css                    |  30 +
 .../internal/InputPill.tsx                    | 116 +++
 .../internal/calcFirstHiddenIndex.ts          |  18 +
 .../internal/useResizeObserver.ts             |  46 ++
 .../tokenized-input-next/internal/useWidth.ts |  56 ++
 .../useTokenizedInputNext.tsx                 | 677 ++++++++++++++++++
 .../tokenized-input-next.qa.stories.tsx       |  37 +
 .../tokenized-input-next.stories.mdx          | 108 +++
 .../tokenized-input-next.stories.tsx          | 336 +++++++++
 .../tokenized-input-next/accessibility.mdx    | 103 +++
 .../tokenized-input-next/examples.mdx         |  34 +
 .../components/tokenized-input-next/index.mdx |  19 +
 .../components/tokenized-input-next/usage.mdx |  31 +
 .../examples/tokenized-input-next/Default.tsx |  10 +
 .../tokenized-input-next/Disabled.tsx         |  10 +
 .../WithCustomizedDelimiter.tsx               |   6 +
 .../examples/tokenized-input-next/index.ts    |   3 +
 24 files changed, 2435 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/lucky-worms-punch.md
 create mode 100644 packages/lab/src/__tests__/__e2e__/tokenized-input-next/TokenizedInputNext.cy.tsx
 create mode 100644 packages/lab/src/tokenized-input-next/TokenizedInputNext.css
 create mode 100644 packages/lab/src/tokenized-input-next/TokenizedInputNext.tsx
 create mode 100644 packages/lab/src/tokenized-input-next/index.ts
 create mode 100644 packages/lab/src/tokenized-input-next/internal/InputPill.css
 create mode 100644 packages/lab/src/tokenized-input-next/internal/InputPill.tsx
 create mode 100644 packages/lab/src/tokenized-input-next/internal/calcFirstHiddenIndex.ts
 create mode 100644 packages/lab/src/tokenized-input-next/internal/useResizeObserver.ts
 create mode 100644 packages/lab/src/tokenized-input-next/internal/useWidth.ts
 create mode 100644 packages/lab/src/tokenized-input-next/useTokenizedInputNext.tsx
 create mode 100644 packages/lab/stories/tokenized-input-next/tokenized-input-next.qa.stories.tsx
 create mode 100644 packages/lab/stories/tokenized-input-next/tokenized-input-next.stories.mdx
 create mode 100644 packages/lab/stories/tokenized-input-next/tokenized-input-next.stories.tsx
 create mode 100644 site/docs/components/tokenized-input-next/accessibility.mdx
 create mode 100644 site/docs/components/tokenized-input-next/examples.mdx
 create mode 100644 site/docs/components/tokenized-input-next/index.mdx
 create mode 100644 site/docs/components/tokenized-input-next/usage.mdx
 create mode 100644 site/src/examples/tokenized-input-next/Default.tsx
 create mode 100644 site/src/examples/tokenized-input-next/Disabled.tsx
 create mode 100644 site/src/examples/tokenized-input-next/WithCustomizedDelimiter.tsx
 create mode 100644 site/src/examples/tokenized-input-next/index.ts

diff --git a/.changeset/lucky-worms-punch.md b/.changeset/lucky-worms-punch.md
new file mode 100644
index 00000000000..e8661cb249b
--- /dev/null
+++ b/.changeset/lucky-worms-punch.md
@@ -0,0 +1,11 @@
+---
+"@salt-ds/lab": patch
+---
+
+Added TokenizedInputNext to lab.
+
+Tokenized input provides an input field for text that’s converted into a pill within the field, or tokenized, when the user enters a delimiting character.
+
+```tsx
+<TokenizedInputNext />
+```
diff --git a/packages/core/src/form-field-context/FormFieldContext.ts b/packages/core/src/form-field-context/FormFieldContext.ts
index 9c3d2222b82..617b9045ef4 100644
--- a/packages/core/src/form-field-context/FormFieldContext.ts
+++ b/packages/core/src/form-field-context/FormFieldContext.ts
@@ -11,7 +11,7 @@ export interface A11yValueProps {
   labelId?: string;
 }
 
-type NecessityType = "required" | "optional" | "asterisk";
+export type NecessityType = "required" | "optional" | "asterisk";
 
 export interface a11yValueAriaProps {
   "aria-labelledby": A11yValueProps["labelId"];
diff --git a/packages/lab/src/__tests__/__e2e__/tokenized-input-next/TokenizedInputNext.cy.tsx b/packages/lab/src/__tests__/__e2e__/tokenized-input-next/TokenizedInputNext.cy.tsx
new file mode 100644
index 00000000000..99510df17d5
--- /dev/null
+++ b/packages/lab/src/__tests__/__e2e__/tokenized-input-next/TokenizedInputNext.cy.tsx
@@ -0,0 +1,179 @@
+import { composeStories } from "@storybook/react";
+import * as tokenizedInputNextStories from "@stories/tokenized-input-next/tokenized-input-next.stories";
+import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility";
+
+const composedStories = composeStories(tokenizedInputNextStories);
+
+const { Default, WithCollapsedButton } = composedStories;
+
+describe("GIVEN a Tokenized Input", () => {
+  checkAccessibility(composedStories);
+  describe("WHEN disabled", () => {
+    it("SHOULD mount as disabled", () => {
+      cy.mount(<Default disabled />);
+      cy.findByRole("textbox").should("be.disabled");
+    });
+  });
+  describe("WHEN readonly", () => {
+    it("SHOULD mount as readonly", () => {
+      cy.mount(<Default defaultSelected={["Tokyo"]} readOnly />);
+      cy.findByRole("textbox").should("have.attr", "readonly");
+    });
+    it("should not allow to remove or add items", () => {
+      cy.mount(<Default defaultSelected={["Tokyo"]} readOnly />);
+      cy.findByRole("option").should("exist");
+      // Remove the item
+      cy.realPress("ArrowLeft");
+      cy.realPress("Backspace");
+
+      // pill should not have been removed
+      cy.findByRole("option").should("exist");
+    });
+  });
+  describe("WHEN mounted as an uncontrolled component", () => {
+    it("should render the Tokenized Input with pre selected items", () => {
+      cy.mount(<WithCollapsedButton />);
+      cy.findByRole("textbox").should("exist");
+      cy.findByTestId("expand-button").should("exist");
+    });
+    it("should allow adding items by typing and pressing the delimiter", () => {
+      cy.mount(<Default />);
+      cy.findByRole("textbox").focus();
+      cy.findByRole("textbox").type("Tokio,");
+      cy.findByRole("option").should("exist");
+    });
+    it.skip("should highlihht pills if navigating with arrows", () => {
+      // FIXME: option and testid are in the button, not pill wrapper
+      cy.mount(<Default defaultSelected={["Tokyo", "Delhi", "Shanghai"]} />);
+      cy.findByRole("textbox").focus();
+
+      // navigating trough pills with arrows
+      cy.realPress("ArrowLeft");
+      cy.findAllByRole("option")
+        .eq(2)
+        .should("have.class", "saltInputPill-pillHighlighted");
+      cy.realPress("ArrowLeft");
+      cy.realPress("ArrowRight");
+      cy.findAllByRole("option")
+        .eq(1)
+        .should("have.class", "saltInputPill-pillHighlighted");
+    });
+    it("should be able to change delimiter", () => {
+      cy.mount(<Default delimiters={[";"]} />);
+      cy.findByRole("textbox").focus();
+      cy.findByRole("textbox").type("Tokio, Delhi, Shanghai");
+      cy.findAllByRole("option").should("have.length", 0);
+      cy.findByRole("textbox").type("{selectall}{backspace}");
+      cy.findByRole("textbox").type("Tokio; Delhi; Shanghai;");
+      cy.findAllByRole("option").should("have.length", 3);
+    });
+    it("should be able to take an array of delimiters", () => {
+      cy.mount(<Default delimiters={[";", "/", "."]} />);
+      cy.findByRole("textbox").focus();
+      cy.findByRole("textbox").type("Tokio, Delhi, Shanghai");
+      cy.findAllByRole("option").should("have.length", 0);
+      cy.findByRole("textbox").type("{selectall}{backspace}");
+      cy.findByRole("textbox").type("Tokio; Delhi/ Shanghai.");
+      cy.findAllByRole("option").should("have.length", 3);
+    });
+    it("should allow removing items by clicking on the close button", () => {
+      cy.mount(<Default defaultSelected={["Tokyo"]} />);
+      cy.findByRole("textbox").should("exist");
+      cy.findByRole("textbox").focus();
+      // pill should exist
+      cy.findByRole("option").should("exist");
+
+      // Remove the item
+      cy.realPress("ArrowLeft");
+      cy.realPress("Backspace");
+
+      // pill should not exist after removal
+      cy.findByRole("option").should("not.exist");
+    });
+
+    it("should clear input on clicking the clear button", () => {
+      cy.mount(<Default defaultSelected={["Tokyo"]} />);
+      cy.findByRole("textbox").focus();
+      cy.findByTestId("clear-button").realClick();
+      cy.findByRole("textbox").should("have.value", "");
+    });
+    it("should expand on clicking the expand button and collapse when blur", () => {
+      cy.mount(<WithCollapsedButton />);
+      cy.findByRole("textbox").focus();
+      cy.findAllByRole("option").should("have.length", 50);
+      cy.get('[data-testid="pill"]').eq(49).should("be.visible");
+      // Move focus out of Tokenized input
+      cy.realPress("Tab");
+      cy.realPress("Tab");
+
+      cy.findByRole("textbox").should("not.be.focused");
+      cy.get('[data-testid="pill"]').should("have.length", 50);
+      cy.findAllByTestId("pill").eq(49).should("not.be.visible");
+    });
+    it("should not display the clear button if there is no selection", () => {
+      cy.mount(<Default />);
+      cy.findByTestId("clear-button").should("not.exist");
+    });
+    it("should return focus to input if an item is closed", () => {
+      cy.mount(<Default defaultSelected={["Tokyo"]} />);
+      cy.findByRole("textbox").focus();
+      // clear
+      cy.findByTestId("clear-button").realClick();
+      cy.findByRole("textbox").should("have.focus");
+    });
+    it("should trigger event callbacks when actions are prompted", () => {
+      const onChangeSpy = cy.spy().as("onChange");
+      const onClearSpy = cy.spy().as("onClear");
+      const onExpandSpy = cy.spy().as("onExpand");
+      const onCollapseSpy = cy.spy().as("onCollapse");
+      cy.mount(
+        <WithCollapsedButton
+          onChange={onChangeSpy}
+          onClear={onClearSpy}
+          onExpand={onExpandSpy}
+          onCollapse={onCollapseSpy}
+        />
+      );
+      // expand
+      cy.findByTestId("expand-button").should("exist");
+      cy.findByTestId("expand-button").realClick();
+      // Move focus out of Tokenized input
+      cy.realPress("Tab");
+      cy.realPress("Tab");
+      //clear input
+      cy.findByRole("textbox").focus();
+      cy.findByTestId("clear-button").realClick();
+      cy.findByRole("textbox").should("have.focus");
+      // type and add an item
+      cy.findByRole("textbox").type("Tokio,");
+      cy.findByRole("option").should("exist");
+
+      cy.get("@onClear").should("have.been.called");
+      cy.get("@onExpand").should("have.been.called");
+      cy.get("@onChange").should("have.been.called");
+    });
+  });
+
+  describe("WHEN mounted as a controlled component", () => {
+    it("THEN have the specified value", () => {
+      cy.mount(<Default defaultSelected={["Delhi"]} value="Tokio" />);
+      cy.findByRole("textbox").should("have.value", "Tokio");
+    });
+
+    describe("THEN the user input is updated", () => {
+      it("SHOULD call onChange with the new value", () => {
+        const changeSpy = cy.stub().as("changeSpy");
+        cy.mount(
+          <Default
+            defaultSelected={["Delhi"]}
+            value="Tokio"
+            onChange={changeSpy}
+          />
+        );
+        cy.findByRole("textbox").focus();
+        cy.findByRole("textbox").click().clear().type("Mexico City,");
+        cy.get("@changeSpy").should("have.been.called");
+      });
+    });
+  });
+});
diff --git a/packages/lab/src/index.ts b/packages/lab/src/index.ts
index 1dc8d5ea054..508555cad57 100644
--- a/packages/lab/src/index.ts
+++ b/packages/lab/src/index.ts
@@ -74,6 +74,7 @@ export * from "./tabs";
 export * from "./tabs-next";
 export * from "./toast-group";
 export * from "./tokenized-input";
+export * from "./tokenized-input-next";
 export * from "./toolbar";
 export * from "./tree";
 export * from "./utils";
diff --git a/packages/lab/src/tokenized-input-next/TokenizedInputNext.css b/packages/lab/src/tokenized-input-next/TokenizedInputNext.css
new file mode 100644
index 00000000000..90d3e0e9af6
--- /dev/null
+++ b/packages/lab/src/tokenized-input-next/TokenizedInputNext.css
@@ -0,0 +1,225 @@
+/* Style applied to the root element */
+.saltTokenizedInputNext-container {
+  width: 100%;
+}
+.saltTokenizedInputNext {
+  --tokenizedInput-borderColor: var(--salt-editable-borderColor);
+  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle);
+  --tokenizedInput-outlineColor: var(--salt-focused-outlineColor);
+  --tokenizedInput-border: none;
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);
+
+  align-items: center;
+  background: var(--tokenizedInput-background);
+  border: var(--tokenizedInput-border);
+  color: var(--salt-content-primary-foreground);
+  display: inline-flex;
+  flex-wrap: wrap;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  height: 100%;
+  line-height: var(--salt-text-lineHeight);
+  min-height: var(--salt-size-base);
+  padding: 0 var(--salt-spacing-100);
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Style applied on hover */
+.saltTokenizedInputNext:hover {
+  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-hover);
+  --tokenizedInput-borderColor: var(--salt-editable-borderColor-hover);
+
+  background: var(--tokenizedInput-background-hover);
+  cursor: var(--salt-editable-cursor-hover);
+}
+
+/* Style applied when active */
+.saltTokenizedInputNext:active {
+  --tokenizedInput-borderColor: var(--salt-editable-borderColor-active);
+  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-active);
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);
+
+  background: var(--tokenizedInput-background-active);
+  cursor: var(--salt-editable-cursor-active);
+}
+
+/* Class applied if `variant="primary"` */
+.saltTokenizedInputNext-primary {
+  --tokenizedInput-background: var(--salt-editable-primary-background);
+  --tokenizedInput-background-active: var(--salt-editable-primary-background-active);
+  --tokenizedInput-background-hover: var(--salt-editable-primary-background-hover);
+  --tokenizedInput-background-disabled: var(--salt-editable-primary-background-disabled);
+  --tokenizedInput-background-readonly: var(--salt-editable-primary-background-readonly);
+}
+
+/* Class applied if `variant="secondary"` */
+.saltTokenizedInputNext-secondary {
+  --tokenizedInput-background: var(--salt-editable-secondary-background);
+  --tokenizedInput-background-active: var(--salt-editable-secondary-background-active);
+  --tokenizedInput-background-hover: var(--salt-editable-secondary-background-active);
+  --tokenizedInput-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --tokenizedInput-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+
+/* Style applied to input if `validationState="error"` */
+.saltTokenizedInputNext-error,
+.saltTokenizedInputNext-error:hover {
+  --tokenizedInput-background: var(--salt-status-error-background);
+  --tokenizedInput-background-active: var(--salt-status-error-background);
+  --tokenizedInput-background-hover: var(--salt-status-error-background);
+  --tokenizedInput-borderColor: var(--salt-status-error-borderColor);
+  --tokenizedInput-outlineColor: var(--salt-status-error-borderColor);
+}
+
+/* Style applied to input if `validationState="warning"` */
+.saltTokenizedInputNext-warning,
+.saltTokenizedInputNext-warning:hover {
+  --tokenizedInput-background: var(--salt-status-warning-background);
+  --tokenizedInput-background-active: var(--salt-status-warning-background);
+  --tokenizedInput-background-hover: var(--salt-status-warning-background);
+  --tokenizedInput-borderColor: var(--salt-status-warning-borderColor);
+  --tokenizedInput-outlineColor: var(--salt-status-warning-borderColor);
+}
+
+/* Style applied to input if `validationState="success"` */
+.saltTokenizedInputNext-success,
+.saltTokenizedInputNext-success:hover {
+  --tokenizedInput-background: var(--salt-status-success-background);
+  --tokenizedInput-background-active: var(--salt-status-success-background);
+  --tokenizedInput-background-hover: var(--salt-status-success-background);
+  --tokenizedInput-borderColor: var(--salt-status-success-borderColor);
+  --tokenizedInput-outlineColor: var(--salt-status-success-borderColor);
+}
+
+/* Style applied to inner textarea element */
+.saltTokenizedInputNext-textarea {
+  background: none;
+  border: none;
+  box-sizing: content-box;
+  color: inherit;
+  cursor: inherit;
+  display: inline-flex;
+  flex-basis: 0;
+  height: var(--salt-text-lineHeight);
+  font: inherit;
+  letter-spacing: 0;
+  overflow: hidden;
+  resize: none;
+  padding: 0;
+  min-width: 1px; /* requires a min width to be visible */
+}
+.saltTokenizedInputNext-expanded .saltTokenizedInputNext-textarea {
+  flex-grow: 1;
+  min-width: 4em; /* on expanded, use the same min-width as input*/
+}
+
+/* Style applied to placeholder */
+.saltTokenizedInputNext-textarea::placeholder {
+  font-weight: var(--salt-text-fontWeight-small);
+}
+
+/* Reset in the  class */
+.saltTokenizedInputNext-textarea:focus {
+  outline: none;
+}
+
+/* Style applied to selected input */
+.saltTokenizedInputNext-textarea::selection {
+  background: var(--salt-content-foreground-highlight);
+}
+
+/* Styling when focused */
+.saltTokenizedInputNext-focused {
+  --tokenizedInput-borderColor: var(--tokenizedInput-outlineColor);
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);
+
+  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--tokenizedInput-outlineColor);
+}
+
+/* Style applied if `readOnly={true}` */
+.saltTokenizedInputNext-readOnly,
+.saltTokenizedInputNext-readOnly:active,
+.saltTokenizedInputNext-readOnly:hover {
+  --tokenizedInput-borderColor: var(--salt-editable-borderColor-readonly);
+  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-readonly);
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);
+
+  background: var(--tokenizedInput-background-readonly);
+  cursor: var(--salt-editable-cursor-readonly);
+}
+
+/* Style applied to selected text if `disabled={true}` */
+.saltTokenizedInputNext-disabled .saltTokenizedInputNext-textarea::selection {
+  background: none;
+}
+
+/* Style applied when `disabled={true}` */
+.saltTokenizedInputNext-disabled,
+.saltTokenizedInputNext-disabled:hover,
+.saltTokenizedInputNext-disabled:active {
+  --tokenizedInput-borderColor: var(--salt-editable-borderColor-disabled);
+  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-disabled);
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);
+
+  background: var(--tokenizedInput-background-disabled);
+  cursor: var(--salt-editable-cursor-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
+}
+
+/* Style for activation indicator */
+.saltTokenizedInputNext-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--tokenizedInput-activationIndicator-borderWidth) var(--tokenizedInput-borderStyle) var(--tokenizedInput-borderColor);
+}
+
+/* Style applied if `bordered={true}` */
+.saltTokenizedInputNext.saltTokenizedInputNext-bordered {
+  --tokenizedInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tokenizedInput-borderColor);
+  --tokenizedInput-activationIndicator-borderWidth: 0;
+}
+
+/* Style applied if active or focused when `bordered={true}` */
+.saltTokenizedInputNext-bordered:active,
+.saltTokenizedInputNext-bordered.saltTokenizedInputNext-focused {
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);
+}
+
+/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */
+.saltTokenizedInputNext-bordered.saltTokenizedInputNext-readOnly:hover,
+.saltTokenizedInputNext-bordered.saltTokenizedInputNext-disabled:hover {
+  --tokenizedInput-activationIndicator-borderWidth: 0;
+}
+
+.saltTokenizedInputNext-statusAdornment {
+  margin-left: auto;
+  margin-right: var(--salt-spacing-100);
+}
+
+.saltTokenizedInputNext-endAdornmentContainer {
+  margin-left: auto;
+  align-self: self-end;
+  display: inline-flex;
+  min-height: var(--salt-size-base);
+}
+
+.saltTokenizedInputNext-statusAdornment ~ .saltTokenizedInputNext-endAdornmentContainer {
+  margin-left: 0;
+}
+
+.saltTokenizedInputNext .saltButton {
+  --saltButton-padding: 0;
+  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));
+}
+
+.saltTokenizedInputNext .saltButton.saltTokenizedInputNext-endAdornment {
+  --saltButton-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;
+}
+.saltTokenizedInputNext-hidden {
+  display: none;
+}
diff --git a/packages/lab/src/tokenized-input-next/TokenizedInputNext.tsx b/packages/lab/src/tokenized-input-next/TokenizedInputNext.tsx
new file mode 100644
index 00000000000..bc509be13b2
--- /dev/null
+++ b/packages/lab/src/tokenized-input-next/TokenizedInputNext.tsx
@@ -0,0 +1,376 @@
+import {
+  AdornmentValidationStatus,
+  Button,
+  ButtonProps,
+  makePrefixer,
+  NecessityType,
+  StatusAdornment,
+  useForkRef,
+  useId,
+  ValidationStatus,
+} from "@salt-ds/core";
+import {
+  ChangeEventHandler,
+  FocusEvent,
+  FocusEventHandler,
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+  KeyboardEvent,
+  KeyboardEventHandler,
+  ReactEventHandler,
+  Ref,
+  SyntheticEvent,
+  TextareaHTMLAttributes,
+  useRef,
+} from "react";
+import {
+  TokenizedInputNextHelpers,
+  TokenizedInputNextState,
+  useTokenizedInputNext,
+} from "./useTokenizedInputNext";
+import { clsx } from "clsx";
+import { InputPill } from "./internal/InputPill";
+import { CloseIcon, OverflowMenuIcon } from "@salt-ds/icons";
+import { useWindow } from "@salt-ds/window";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import tokenizedInputCss from "./TokenizedInputNext.css";
+
+type ChangeHandler<Item> = (
+  event: SyntheticEvent,
+  selectedItems: Item[] | undefined
+) => void;
+
+type ExpandButtonProps = Pick<
+  ButtonProps,
+  "role" | "aria-roledescription" | "aria-describedby"
+> & { "aria-label"?: string };
+
+export interface TokenizedInputNextProps<Item>
+  extends Partial<TokenizedInputNextState<Item>>,
+    Omit<
+      HTMLAttributes<HTMLDivElement>,
+      "onFocus" | "onBlur" | "onChange" | "onKeyUp" | "onKeyDown"
+    > {
+  ExpandButtonProps?: ExpandButtonProps;
+  disabled?: boolean;
+  focused?: boolean;
+  expandButtonRef?: Ref<HTMLButtonElement>;
+  onBlur?: FocusEventHandler<HTMLTextAreaElement | HTMLButtonElement>;
+  onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement | HTMLButtonElement>;
+  // Can key down on either input or expand button
+  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement | HTMLButtonElement>;
+  onRemoveItem?: (event: SyntheticEvent, index: number) => void;
+  onInputBlur?: FocusEventHandler<HTMLTextAreaElement>;
+  onInputFocus?: FocusEventHandler<HTMLTextAreaElement>;
+  onInputChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  onClick?: ReactEventHandler;
+  onClear?: ReactEventHandler;
+  delimiters?: string[];
+  disableAddOnBlur?: boolean;
+  defaultSelected?: Item[];
+  onChange?: ChangeHandler<Item>;
+  onCollapse?: ReactEventHandler;
+  onExpand?: ReactEventHandler;
+
+  /// from input
+  /**
+   * Validation status.
+   */
+  validationStatus?: Omit<ValidationStatus, "info">;
+  /**
+   * If `true`, the component is read only.
+   */
+  readOnly?: boolean;
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.
+   */
+  textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
+  /**
+   * Optional ref for the textarea component
+   */
+  textAreaRef?: Ref<HTMLTextAreaElement>;
+  necessity?: NecessityType;
+  /**
+   * Styling variant. Defaults to "primary".
+   */
+  variant?: "primary" | "secondary";
+}
+
+const withBaseName = makePrefixer("saltTokenizedInputNext");
+
+const getItemsAriaLabel = (itemCount: number) =>
+  itemCount === 0
+    ? "no item selected"
+    : `${itemCount} ${itemCount > 1 ? "items" : "item"}`;
+
+export const TokenizedInputNext = forwardRef(function TokenizedInputNext<Item>(
+  {
+    textAreaRef: textAreaRefProp,
+    textAreaProps = {},
+    variant = "primary",
+    ...rest
+  }: TokenizedInputNextProps<Item>,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-tokenized-input-next",
+    css: tokenizedInputCss,
+    window: targetWindow,
+  });
+  const {
+    "aria-describedby": textAreaDescribedBy,
+    "aria-labelledby": textAreaLabelledBy,
+    required: textAreaRequired,
+    ...restTextAreaProps
+  } = textAreaProps;
+
+  const { refs, helpers, inputProps, firstHiddenIndex } =
+    useTokenizedInputNext(rest);
+
+  const {
+    textAreaRef: textAreaHookRef,
+    pillsRef,
+    clearButtonRef,
+    expandButtonRef,
+    statusAdornmentRef,
+    containerRef: containerHookRef,
+  } = refs;
+
+  const {
+    ExpandButtonProps = {
+      "aria-label": "expand edit",
+    },
+    className,
+    activeIndices = [],
+    selectedItems = [],
+    highlightedIndex,
+    value,
+    expanded,
+    disabled,
+    onBlur,
+    onKeyDown,
+    onRemoveItem,
+    onInputChange,
+    focused,
+    validationStatus,
+    readOnly,
+    onInputFocus,
+    onInputBlur,
+    onClear,
+    onClick,
+    onKeyUp,
+    id: idProp,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...restProps
+  } = inputProps;
+
+  const id = useId(idProp);
+  const inputId = `${id}-input`;
+  const expandButtonId = `${id}-expand-button`;
+  const clearButtonId = `${id}-clear-button`;
+
+  const keydownExpandButton = useRef(false);
+  const containerRef = useForkRef(ref, containerHookRef);
+  const textAreaRef = useForkRef(textAreaHookRef, textAreaRefProp);
+  const showExpandButton = !expanded && firstHiddenIndex != null;
+
+  const hasHelpers = (helpers: TokenizedInputNextHelpers<Item>) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (helpers == null) {
+        console.warn(
+          'TokenizedInputNext is used without helpers. You should pass in "helpers" from "useTokenizedInputNext".'
+        );
+      }
+    }
+    return helpers != null;
+  };
+
+  const handleExpandButtonKeyDown = (
+    event: KeyboardEvent<HTMLButtonElement>
+  ) => {
+    const singleChar = event.key.length === 1;
+    const triggerExpand =
+      [
+        "CONTROL",
+        "META",
+        "ENTER",
+        "BACKSPACE",
+        "ARROWDOWN",
+        "ARROWLEFT",
+        "ARROWRIGHT",
+      ].indexOf(event.key.toUpperCase()) !== -1;
+
+    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      helpers.updateExpanded(event, true);
+      keydownExpandButton.current = true;
+    }
+  };
+
+  const handleInputKeyUp = (
+    event: KeyboardEvent<HTMLButtonElement | HTMLTextAreaElement>
+  ) => {
+    // Call keydown again if the initial event has been used to expand the input
+    if (keydownExpandButton.current && "Enter" !== event.key) {
+      keydownExpandButton.current = false;
+      onKeyDown?.(event);
+    }
+    onKeyUp?.(event);
+  };
+
+  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+
+    if (hasHelpers(helpers)) {
+      helpers.updateExpanded(event, true);
+    }
+  };
+
+  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+  };
+
+  const selectedItemIds = selectedItems.map(
+    (_, index) => `${id}-pill-${index}`
+  );
+
+  const inputAriaLabelledBy = disabled
+    ? [ariaLabelledBy, inputId, ...selectedItemIds]
+    : [ariaLabelledBy, inputId];
+
+  const expandedWithItems =
+    expanded && !showExpandButton && selectedItems.length > 0;
+  const { "aria-label": expandButtonAccessibleText, ...restExpandButtonProps } =
+    ExpandButtonProps;
+
+  return (
+    <div className={withBaseName("container")}>
+      <span
+        aria-owns={selectedItemIds.join(" ")}
+        className={withBaseName("hidden")}
+        role="listbox"
+      />
+      <div
+        className={clsx(
+          withBaseName(),
+          withBaseName(variant),
+          {
+            [withBaseName("expanded")]: expanded,
+            [withBaseName("focused")]: !disabled && focused,
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("readOnly")]: readOnly,
+            [withBaseName(validationStatus as string)]: validationStatus,
+          },
+          className
+        )}
+        ref={containerRef}
+        onClick={onClick}
+        // Tab index allows the div to be found as related target and prevents it closing when a click in happens
+        tabIndex={-1}
+        {...restProps}
+      >
+        {selectedItems.length > 0 &&
+          selectedItems.map((item, index) => {
+            const label = String(item);
+            return (
+              <InputPill
+                disabled={disabled}
+                hidden={showExpandButton && index >= firstHiddenIndex}
+                highlighted={
+                  index === highlightedIndex ||
+                  activeIndices.indexOf(index) !== -1
+                }
+                id={`${id}-pill-${index}`}
+                index={index}
+                key={`${index}-${label}`}
+                label={label}
+                onClose={
+                  expanded && !readOnly
+                    ? (event) => onRemoveItem?.(event, index)
+                    : undefined
+                }
+                pillsRef={pillsRef}
+              />
+            );
+          })}
+        <textarea
+          aria-labelledby={clsx(inputAriaLabelledBy, textAreaLabelledBy)}
+          aria-describedby={clsx(ariaDescribedBy, textAreaDescribedBy)}
+          aria-label={clsx(ariaLabel, getItemsAriaLabel(selectedItems.length))}
+          aria-activedescendant={
+            highlightedIndex && highlightedIndex >= 0
+              ? `${id}-pill-${highlightedIndex}`
+              : undefined
+          }
+          disabled={disabled}
+          id={inputId}
+          readOnly={readOnly}
+          ref={textAreaRef}
+          required={textAreaRequired}
+          rows={1}
+          tabIndex={disabled ? -1 : 0}
+          value={value}
+          className={clsx(withBaseName("textarea"), textAreaProps?.className)}
+          onChange={onInputChange}
+          onBlur={onInputBlur}
+          onFocus={!disabled ? onInputFocus : undefined}
+          onKeyDown={onKeyDown}
+          {...restTextAreaProps}
+        />
+        <div className={withBaseName("endAdornmentContainer")}>
+          {!disabled && !readOnly && validationStatus && (
+            <StatusAdornment
+              className={withBaseName("statusAdornment")}
+              ref={statusAdornmentRef}
+              status={validationStatus as AdornmentValidationStatus}
+            />
+          )}
+          {expandedWithItems && !readOnly && (
+            <Button
+              className={withBaseName("endAdornment")}
+              disabled={disabled}
+              id={clearButtonId}
+              onBlur={onBlur}
+              onClick={onClear}
+              onFocus={handleClearButtonFocus}
+              ref={clearButtonRef}
+              variant="secondary"
+              data-testid="clear-button"
+              aria-label="clear input"
+            >
+              <CloseIcon aria-hidden />
+            </Button>
+          )}
+          {showExpandButton && (
+            <Button
+              className={withBaseName("endAdornment")}
+              aria-label={expandButtonAccessibleText}
+              aria-labelledby={clsx(ariaLabelledBy, inputId, expandButtonId)}
+              disabled={disabled}
+              id={expandButtonId}
+              onBlur={onBlur}
+              onClick={handleExpand}
+              onKeyDown={handleExpandButtonKeyDown}
+              onKeyUp={handleInputKeyUp}
+              ref={expandButtonRef}
+              variant="secondary"
+              data-testid="expand-button"
+              {...restExpandButtonProps}
+            >
+              <OverflowMenuIcon />
+            </Button>
+          )}
+        </div>
+
+        <div className={withBaseName("activationIndicator")} />
+      </div>
+    </div>
+  );
+});
diff --git a/packages/lab/src/tokenized-input-next/index.ts b/packages/lab/src/tokenized-input-next/index.ts
new file mode 100644
index 00000000000..24cfcb42b63
--- /dev/null
+++ b/packages/lab/src/tokenized-input-next/index.ts
@@ -0,0 +1,2 @@
+export * from "./TokenizedInputNext";
+export * from "./useTokenizedInputNext";
diff --git a/packages/lab/src/tokenized-input-next/internal/InputPill.css b/packages/lab/src/tokenized-input-next/internal/InputPill.css
new file mode 100644
index 00000000000..bb97a3bdd9b
--- /dev/null
+++ b/packages/lab/src/tokenized-input-next/internal/InputPill.css
@@ -0,0 +1,30 @@
+.saltInputPill {
+  max-width: 100%;
+  margin: var(--salt-spacing-25) var(--salt-spacing-50);
+  margin-left: 0;
+}
+.saltInputPill-expanded {
+  max-width: calc(100% - (var(--salt-size-base) - var(--salt-spacing-100)));
+}
+.saltInputPill-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.saltInputPill.saltInputPill-hidden {
+  display: none;
+}
+
+.saltInputPill.saltInputPill:hover {
+  background: var(--salt-selectable-background-hover);
+}
+
+.saltInputPill.saltInputPill-pillHighlighted {
+  --saltPillNext-background: var(--salt-selectable-background-hover);
+}
+
+.saltInputPill.saltInputPill:active {
+  background: var(--salt-actionable-primary-background-active);
+  --saltPillNext-color: var(--salt-actionable-primary-foreground-active);
+  --saltIcon-color: var(--salt-actionable-primary-foreground-active);
+}
diff --git a/packages/lab/src/tokenized-input-next/internal/InputPill.tsx b/packages/lab/src/tokenized-input-next/internal/InputPill.tsx
new file mode 100644
index 00000000000..eceec2a7434
--- /dev/null
+++ b/packages/lab/src/tokenized-input-next/internal/InputPill.tsx
@@ -0,0 +1,116 @@
+import { clsx } from "clsx";
+import {
+  memo,
+  MutableRefObject,
+  SyntheticEvent,
+  useRef,
+  useState,
+} from "react";
+import {
+  makePrefixer,
+  Tooltip,
+  useIsomorphicLayoutEffect,
+} from "@salt-ds/core";
+import { getWidth } from "./useWidth";
+import { PillNext, PillNextProps } from "../../pill-next";
+import { useWindow } from "@salt-ds/window";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import inputPillCss from "./InputPill.css";
+import { CloseIcon } from "@salt-ds/icons";
+
+const withBaseName = makePrefixer("saltInputPill");
+
+export type InputPillProps = PillNextProps & {
+  /**
+   * A ref object holds pills index map to width.
+   */
+  pillsRef: MutableRefObject<Record<number, number | undefined>>;
+  /**
+   * Index of the pill within Input.
+   */
+  index: number;
+  /**
+   * Whether the pill is the last visible one within Input.
+   */
+  lastVisible?: boolean;
+  /**
+   * Pill label.
+   */
+  label?: string;
+  /**
+   * Whether the pill is highlighted.
+   */
+  highlighted?: boolean;
+
+  /**
+   * Callback when pill is deleted.
+   */
+  onClose?: (event: SyntheticEvent, index: number) => void;
+};
+
+export const InputPill = memo(function InputPill(props: InputPillProps) {
+  const {
+    className,
+    hidden,
+    highlighted,
+    index,
+    label,
+    onClose,
+    pillsRef,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-input-pill",
+    css: inputPillCss,
+    window: targetWindow,
+  });
+
+  const ref = useRef<HTMLButtonElement | null>(null);
+  const [isEllipsisActive, setEllipsisActive] = useState(false);
+  const isRemovable = Boolean(onClose);
+
+  // useIsomorphicLayoutEffect to match the calcFirstHiddenIndex
+  // We need to collect widths before the calculation
+  useIsomorphicLayoutEffect(() => {
+    const text = ref?.current?.firstElementChild as HTMLElement;
+    if (!isRemovable && pillsRef.current) {
+      pillsRef.current[index] = getWidth(ref.current);
+    }
+    setEllipsisActive(text?.offsetWidth < text?.scrollWidth);
+  }, [pillsRef, index, isRemovable]);
+
+  useIsomorphicLayoutEffect(
+    () => () => {
+      pillsRef.current[index] = undefined;
+    },
+    [pillsRef, index]
+  );
+
+  const handleClose = (event: SyntheticEvent) => {
+    onClose?.(event, index);
+  };
+  return (
+    <Tooltip content={label} disabled={!isEllipsisActive}>
+      <PillNext
+        className={clsx(
+          withBaseName(),
+          {
+            [withBaseName("pillHighlighted")]: highlighted,
+            [withBaseName("expanded")]: isRemovable,
+            [withBaseName("hidden")]: hidden,
+          },
+          className
+        )}
+        tabIndex={-1}
+        onClick={isRemovable ? handleClose : undefined}
+        ref={ref}
+        role="option"
+        {...rest}
+      >
+        <span className={withBaseName("label")}>{label}</span>
+        {isRemovable && <CloseIcon />}
+      </PillNext>
+    </Tooltip>
+  );
+});
diff --git a/packages/lab/src/tokenized-input-next/internal/calcFirstHiddenIndex.ts b/packages/lab/src/tokenized-input-next/internal/calcFirstHiddenIndex.ts
new file mode 100644
index 00000000000..de285c40131
--- /dev/null
+++ b/packages/lab/src/tokenized-input-next/internal/calcFirstHiddenIndex.ts
@@ -0,0 +1,18 @@
+export function calcFirstHiddenIndex({
+  containerWidth = 0,
+  pillWidths = [],
+}: { containerWidth?: number; pillWidths?: number[] } = {}) {
+  let totalWidth = 0;
+  let firstHiddenIndex: null | number = null;
+
+  for (let i = 0; i < pillWidths.length; i++) {
+    totalWidth += pillWidths[i];
+
+    if (totalWidth > containerWidth) {
+      firstHiddenIndex = i;
+      break;
+    }
+  }
+
+  return firstHiddenIndex;
+}
diff --git a/packages/lab/src/tokenized-input-next/internal/useResizeObserver.ts b/packages/lab/src/tokenized-input-next/internal/useResizeObserver.ts
new file mode 100644
index 00000000000..2456adc8ce8
--- /dev/null
+++ b/packages/lab/src/tokenized-input-next/internal/useResizeObserver.ts
@@ -0,0 +1,46 @@
+// TODO: Use resize observer from Tabstrip / Toolbar
+
+import { useIsomorphicLayoutEffect } from "@salt-ds/core";
+import { useRef, useEffect, Ref } from "react";
+
+/**
+ * This monitors the size of a component and calls `onSizeChange` callback
+ * every time when size changes.
+ */
+export function useResizeObserver<Element extends HTMLElement>(
+  onSizeChange: (
+    entries: ResizeObserverEntry[],
+    observer?: ResizeObserver
+  ) => void
+): Ref<Element> {
+  const ref = useRef<Element>(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(onSizeChange);
+    observer.observe(ref.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [onSizeChange]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) {
+      onSizeChange([
+        {
+          target: ref.current,
+          contentRect: ref.current.getBoundingClientRect(),
+          borderBoxSize: [],
+          contentBoxSize: [],
+          devicePixelContentBoxSize: [],
+        },
+      ]);
+    }
+  }, [onSizeChange]);
+
+  return ref;
+}
diff --git a/packages/lab/src/tokenized-input-next/internal/useWidth.ts b/packages/lab/src/tokenized-input-next/internal/useWidth.ts
new file mode 100644
index 00000000000..7ba338fd069
--- /dev/null
+++ b/packages/lab/src/tokenized-input-next/internal/useWidth.ts
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { Density, useIsomorphicLayoutEffect } from "@salt-ds/core";
+
+const safeParseFloat = (target?: string) => parseFloat(target ?? "0");
+
+export const getPadding = (node: HTMLElement | null) => {
+  if (node == null) {
+    return 0;
+  }
+  const style = window.getComputedStyle(node);
+  const padding =
+    safeParseFloat(style.paddingLeft) + safeParseFloat(style.paddingRight);
+  return padding;
+};
+
+export const getWidth = (node: HTMLElement | null) => {
+  if (node == null) {
+    return 0;
+  }
+
+  const style = window.getComputedStyle(node);
+  const margin =
+    safeParseFloat(style.marginLeft) + safeParseFloat(style.marginRight);
+
+  let dimension;
+
+  if (style.display === "none") {
+    const nodeDisplay = node.style.display;
+
+    node.style.display = "inline-block";
+    dimension = node.getBoundingClientRect();
+    node.style.display = nodeDisplay;
+  } else {
+    dimension = node.getBoundingClientRect();
+  }
+
+  return dimension.width + margin;
+};
+
+/**
+ * This records the width of a component when it's rendered
+ */
+export const useWidth = (
+  density: Density
+): [(newNode: any) => void, number] => {
+  const [node, setNode] = useState<HTMLElement | null>(null);
+  const [width, setWidth] = useState<number>(0);
+
+  useIsomorphicLayoutEffect(() => {
+    if (node !== null) {
+      setWidth(getWidth(node));
+    }
+  }, [node, density]);
+
+  return [setNode, width];
+};
diff --git a/packages/lab/src/tokenized-input-next/useTokenizedInputNext.tsx b/packages/lab/src/tokenized-input-next/useTokenizedInputNext.tsx
new file mode 100644
index 00000000000..d9ddcb059e6
--- /dev/null
+++ b/packages/lab/src/tokenized-input-next/useTokenizedInputNext.tsx
@@ -0,0 +1,677 @@
+import {
+  ownerWindow,
+  useControlled,
+  useDensity,
+  useForkRef,
+  useFormFieldProps,
+  useId,
+  useIsomorphicLayoutEffect,
+} from "@salt-ds/core";
+import copy from "clipboard-copy";
+import {
+  ChangeEvent,
+  FocusEvent,
+  InputHTMLAttributes,
+  KeyboardEvent,
+  KeyboardEventHandler,
+  Ref,
+  SetStateAction,
+  SyntheticEvent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  MutableRefObject,
+} from "react";
+import { escapeRegExp } from "../utils";
+import { TokenizedInputNextProps } from "./TokenizedInputNext";
+import { getPadding, useWidth } from "./internal/useWidth";
+import { useResizeObserver } from "./internal/useResizeObserver";
+import { calcFirstHiddenIndex } from "./internal/calcFirstHiddenIndex";
+
+export interface TokenizedInputNextState<Item> {
+  activeIndices: number[];
+  expanded: boolean | undefined;
+  highlightedIndex: number | undefined;
+  selectedItems: Item[];
+  value: string | undefined;
+}
+
+export interface TokenizedInputNextHelpers<Item> {
+  setHighlightedIndex: (value?: number) => void;
+  setValue: (value: string) => void;
+  setSelectedItems: (selectedItems: Item[]) => void;
+  updateExpanded: (event: SyntheticEvent, expanded: boolean) => void;
+}
+
+export interface TokenizedInputNextRefs {
+  textAreaRef: Ref<HTMLTextAreaElement>;
+  pillsRef: MutableRefObject<Record<number, number | undefined>>;
+  clearButtonRef: (newNode: HTMLButtonElement) => void;
+  expandButtonRef: Ref<HTMLButtonElement>;
+  statusAdornmentRef: Ref<SVGSVGElement>;
+  containerRef: Ref<HTMLDivElement>;
+}
+
+const getCursorPosition = (
+  inputRef: MutableRefObject<HTMLTextAreaElement | null>
+) => {
+  if (inputRef.current) {
+    const { selectionStart, selectionEnd } = inputRef.current;
+
+    // if there is no selection range
+    if (selectionStart != null && selectionStart === selectionEnd) {
+      return selectionStart;
+    }
+  }
+
+  return -1;
+};
+
+const isCtrlModifier = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+  return (
+    event.ctrlKey ||
+    event.metaKey ||
+    ["CONTROL", "META"].indexOf(event.key.toUpperCase()) !== -1
+  );
+};
+
+function isValidItem<Item>(data: unknown): data is Item {
+  return (
+    (typeof data === "string" && Boolean(data.length)) ||
+    (typeof data !== "string" && data != null)
+  );
+}
+
+interface useTokenizedInputNextResult<Item> {
+  /**
+   * The tokenized input state
+   */
+  state: TokenizedInputNextState<Item>;
+  /**
+   * First hidden element when collapsed
+   */
+  firstHiddenIndex: number | null;
+  /**
+   * Utility functions for modifying tokenized input state
+   */
+  helpers: TokenizedInputNextHelpers<Item>;
+  /**
+   * Refs for tokenized input items.
+   */
+  refs: TokenizedInputNextRefs;
+  /**
+   * Properties applied to a basic tokenized input component
+   */
+  inputProps: Omit<TokenizedInputNextProps<Item>, "helpers" | "onChange">;
+}
+
+export function useTokenizedInputNext<Item>(
+  props: TokenizedInputNextProps<Item>
+): useTokenizedInputNextResult<Item> {
+  const {
+    disabled: formFieldDisabled,
+    readOnly,
+    necessity,
+    validationStatus,
+    a11yProps: {
+      "aria-describedby": ariaDescribedBy,
+      "aria-labelledby": ariaLabelledBy,
+    } = {},
+  } = useFormFieldProps();
+
+  const {
+    delimiters = [","],
+    defaultSelected = [],
+    disabled = formFieldDisabled,
+    readOnly: readOnlyProp,
+    validationStatus: validationStatusProp,
+    disableAddOnBlur,
+    onBlur,
+    onClick,
+    onExpand,
+    onCollapse,
+    onKeyDown,
+    onInputChange,
+    onInputFocus,
+    onInputBlur,
+    onClear,
+    onChange,
+    id: idProp,
+    value: valueProp,
+    expanded: expandedProp,
+    selectedItems: selectedItemsProp,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedByProp,
+    expandButtonRef: expandButtonRefProp,
+    ...restProps
+  } = props;
+
+  const density = useDensity();
+  const id = useId(idProp);
+
+  const [focused, setFocused] = useState(false);
+  const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);
+  const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);
+  const [activeIndices, setActiveIndices] = useState<number[]>([]);
+  const [highlightedIndex, setHighlightedIndex] = useState<number | undefined>(
+    undefined
+  );
+
+  const [expandButtonHookRef, expandButtonWidth] = useWidth(density);
+  const [clearButtonRef, clearButtonWidth] = useWidth(density);
+  const [statusAdornmentRef, statusAdornmentWidth] = useWidth(density);
+  const [inputRef, inputWidth] = useWidth(density);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const pillsRef = useRef<Record<number, number | undefined>>({});
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const preventBlurOnCopy = useRef(false);
+  const expandButtonRef = useForkRef(expandButtonHookRef, expandButtonRefProp);
+
+  const hasActiveItems = Boolean(activeIndices.length);
+  const primaryDelimiter = delimiters[0];
+  const delimiterRegex = useMemo(
+    () => new RegExp(delimiters.map(escapeRegExp).join("|"), "gi"),
+    [delimiters]
+  );
+
+  const [value, setValue, isInputControlled] = useControlled<
+    string | undefined
+  >({
+    controlled: valueProp,
+    default: "",
+    name: "TokenizedInputNext",
+    state: "value",
+  });
+
+  const [selectedItems = [], setSelectedItems, isSelectionControlled] =
+    useControlled<Item[] | undefined>({
+      controlled: selectedItemsProp,
+      default: defaultSelected,
+      name: "TokenizedInputNext",
+      state: "selectedItems",
+    });
+
+  const [expanded, setExpanded, isExpandedControlled] = useControlled<boolean>({
+    controlled: expandedProp,
+    default: false,
+    name: "TokenizedInputNext",
+    state: "expanded",
+  });
+
+  const widthOffset =
+    inputWidth +
+    statusAdornmentWidth +
+    (expanded ? clearButtonWidth : expandButtonWidth);
+
+  const containerObserverRef = useResizeObserver<HTMLDivElement>(
+    useCallback(
+      ([{ contentRect }]) => {
+        const padding = getPadding(containerRef.current);
+        setPillGroupWidth(contentRect.width - padding - widthOffset);
+      },
+      [widthOffset]
+    )
+  );
+
+  useIsomorphicLayoutEffect(
+    () => () => {
+      // When density changes, set hidden index to null so that pills are in their
+      // readonly state before they are measured.
+      setFirstHiddenIndex(null);
+    },
+    [density]
+  );
+
+  // useIsomorphicLayoutEffect because of potential layout change
+  // We want to do that before paint to avoid layout jumps
+  useIsomorphicLayoutEffect(
+    () => {
+      if (expanded) {
+        setFirstHiddenIndex(null);
+      } else if (pillGroupWidth != null) {
+        setFirstHiddenIndex(
+          calcFirstHiddenIndex({
+            containerWidth: pillGroupWidth,
+            pillWidths: Object.values(pillsRef.current).filter(
+              Boolean
+            ) as number[],
+          })
+        );
+      }
+    },
+    // Additional dependency on selectedItems is for the controlled version
+    [expanded, pillGroupWidth, selectedItems]
+  );
+
+  const focusInput = useCallback(() => {
+    if (textAreaRef.current) {
+      textAreaRef.current.focus();
+    }
+  }, []);
+
+  const updateInputValue = (newValue: string | undefined) => {
+    if (!isInputControlled) {
+      setValue(newValue);
+    }
+  };
+
+  const updateSelectedItems = useCallback(
+    (event: SyntheticEvent, action: SetStateAction<Item[] | undefined>) => {
+      if (!isSelectionControlled) {
+        setSelectedItems((prevSelectedItems?: Item[]) => {
+          const newItems =
+            typeof action === "function" ? action(prevSelectedItems) : action;
+
+          if (newItems !== prevSelectedItems) {
+            onChange?.(event, newItems);
+          }
+          return newItems;
+        });
+      } else {
+        onChange?.(
+          event,
+          typeof action === "function" ? action(selectedItems) : action
+        );
+      }
+    },
+    [isSelectionControlled, setSelectedItems, onChange, selectedItems]
+  );
+
+  const updateExpanded = (event: SyntheticEvent, newExpanded: boolean) => {
+    if (!isExpandedControlled) {
+      setExpanded(newExpanded);
+    }
+
+    if (newExpanded) {
+      focusInput();
+      onExpand?.(event);
+    } else {
+      onCollapse?.(event);
+    }
+  };
+
+  const resetInput = () => {
+    updateInputValue("");
+    setHighlightedIndex(undefined);
+    setActiveIndices([]);
+  };
+
+  const removeItems = useCallback(
+    (event: SyntheticEvent, itemIndices: number[]) => {
+      updateSelectedItems(
+        event,
+        (prevSelectedItems) =>
+          prevSelectedItems &&
+          (prevSelectedItems.length === 0
+            ? prevSelectedItems
+            : prevSelectedItems.filter(
+                (_, index) => itemIndices.indexOf(index) === -1
+              ))
+      );
+    },
+    [updateSelectedItems]
+  );
+
+  const handleInputFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
+    event.stopPropagation();
+
+    // The input will lose focus when building the text to copy in a temporary
+    // DOM node. This is particularly visible in a slower browser, i.e. IE 11.
+    // This is to prevent a blur in that scenario.
+    if (preventBlurOnCopy.current) {
+      preventBlurOnCopy.current = false;
+      setActiveIndices(
+        Array.from(
+          { length: selectedItems ? selectedItems.length : 0 },
+          (_, index) => index
+        )
+      );
+      return;
+    }
+
+    onInputFocus?.(event);
+    updateExpanded(event, true);
+    setFocused(true);
+  };
+
+  const handleBlur = (
+    event: FocusEvent<HTMLTextAreaElement | HTMLButtonElement>
+  ) => {
+    onBlur?.(event);
+    setFocused(false);
+    updateExpanded(event, false);
+  };
+
+  const handleInputBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
+    // Check if the related target inside TokenizedInput
+    const container = containerRef?.current;
+    const eventTarget = event.relatedTarget;
+    event.preventDefault();
+    event.stopPropagation();
+    setHighlightedIndex(undefined);
+    setActiveIndices([]);
+    if (!disableAddOnBlur) {
+      handleAddItems(event, value);
+    }
+    onInputBlur?.(event);
+    if (
+      eventTarget !== container &&
+      !container?.contains(eventTarget as Node)
+    ) {
+      handleBlur(event);
+    }
+  };
+
+  const handleClick = (event: SyntheticEvent<HTMLElement>) => {
+    updateExpanded(event, true);
+    setActiveIndices([]);
+    onClick?.(event);
+  };
+
+  const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setHighlightedIndex(undefined);
+
+    onInputChange?.(event);
+
+    const newValue = event.target.value;
+
+    if (delimiterRegex.test(newValue)) {
+      // Process value with delimiters
+      handleAddItems(event, newValue);
+    } else {
+      // Just update input value if there is no delimiter
+      updateInputValue(newValue);
+    }
+  };
+
+  const handleAddItems = (
+    event: SyntheticEvent,
+    newValue: string | undefined,
+    appendOnly?: boolean
+  ) => {
+    if (!newValue || newValue.length === 0) {
+      return;
+    }
+
+    resetInput();
+
+    const newItems = newValue
+      .split(delimiterRegex)
+      .reduce<Item[]>((values, item) => {
+        const newItem = item.trim();
+        return isValidItem<Item>(newItem) ? values.concat(newItem) : values;
+      }, []);
+
+    if (newItems.length) {
+      updateSelectedItems(event, (prevSelectedItems = []) =>
+        hasActiveItems && !appendOnly
+          ? newItems
+          : prevSelectedItems.concat(newItems)
+      );
+    }
+  };
+
+  const handleRemoveItem = useCallback(
+    (event: SyntheticEvent, itemIndex?: number) => {
+      focusInput();
+      if (itemIndex != undefined && !readOnly && !readOnlyProp) {
+        removeItems(event, [itemIndex]);
+      }
+    },
+    [focusInput, removeItems]
+  );
+
+  const handleClear = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    updateSelectedItems(event, []);
+    resetInput();
+    focusInput();
+    onClear?.(event);
+  };
+
+  const cursorAtInputStart = () =>
+    getCursorPosition(textAreaRef) === 0 && Boolean(selectedItems.length);
+
+  const highlightAtPillGroupEnd = () =>
+    highlightedIndex === selectedItems.length - 1;
+
+  const pillGroupKeyDownHandlers: Record<
+    string,
+    KeyboardEventHandler<HTMLTextAreaElement>
+  > = {
+    ArrowLeft: (event) => {
+      event.preventDefault();
+      setHighlightedIndex((prevHighlightedIndex) =>
+        prevHighlightedIndex == null
+          ? selectedItems.length - 1
+          : Math.max(0, prevHighlightedIndex - 1)
+      );
+    },
+    ArrowRight: (event) => {
+      if (highlightAtPillGroupEnd()) {
+        return setHighlightedIndex(undefined);
+      }
+
+      event.preventDefault();
+      setHighlightedIndex((prevHighlightedIndex) =>
+        prevHighlightedIndex == null
+          ? prevHighlightedIndex
+          : Math.min(selectedItems.length - 1, prevHighlightedIndex + 1)
+      );
+    },
+    Backspace: (event) => {
+      event.preventDefault();
+      handleRemoveItem(event, highlightedIndex);
+      setHighlightedIndex((prevHighlightedIndex) =>
+        prevHighlightedIndex == null
+          ? prevHighlightedIndex
+          : Math.max(0, prevHighlightedIndex - 1)
+      );
+    },
+    Home: (event) => {
+      event.preventDefault();
+      setHighlightedIndex(0);
+    },
+    End: (event) => {
+      event.preventDefault();
+      setHighlightedIndex(selectedItems.length - 1);
+    },
+    Enter: (event) => {
+      event.preventDefault();
+      handleRemoveItem(event, highlightedIndex);
+    },
+    Delete: (event) => {
+      event.preventDefault();
+      handleRemoveItem(event, highlightedIndex);
+    },
+    " ": (event) => {
+      event.preventDefault();
+      handleRemoveItem(event, highlightedIndex);
+    },
+  };
+
+  const inputKeyDownHandlers: Record<
+    string,
+    KeyboardEventHandler<HTMLTextAreaElement>
+  > = {
+    ArrowLeft: (event) => {
+      if (cursorAtInputStart()) {
+        event.preventDefault();
+        setHighlightedIndex(selectedItems.length - 1);
+      }
+    },
+    Backspace: (event) => {
+      if (hasActiveItems) {
+        removeItems(event, activeIndices);
+      } else if (cursorAtInputStart()) {
+        setHighlightedIndex(selectedItems.length - 1);
+      }
+    },
+    Delete: (event) => {
+      if (hasActiveItems) {
+        removeItems(event, activeIndices);
+      }
+    },
+    Enter: (event) => {
+      event.preventDefault();
+
+      if (hasActiveItems) {
+        removeItems(event, activeIndices);
+      } else {
+        handleAddItems(event, value);
+      }
+    },
+  };
+
+  const handleCtrlModifierKeyDown: InputHTMLAttributes<HTMLTextAreaElement>["onKeyDown"] =
+    (event) => {
+      const win = ownerWindow(event.target as HTMLElement);
+      const supportClipboard = win.navigator?.clipboard;
+
+      switch (event.key.toUpperCase()) {
+        case "A":
+          // Select all
+          setHighlightedIndex(undefined);
+          setActiveIndices(
+            Array.from({ length: selectedItems.length }, (_, index) => index)
+          );
+          break;
+        case "C":
+          // Copy
+          const textToCopy =
+            activeIndices.length > 0
+              ? activeIndices
+                  .map((index) => String(selectedItems[index]))
+                  .concat(value != null ? String(value).trim() : "")
+                  .filter(Boolean)
+                  .join(primaryDelimiter)
+              : highlightedIndex !== undefined
+              ? String(selectedItems[highlightedIndex] + ",")
+              : "";
+          copy(textToCopy)
+            .then((result) => {
+              preventBlurOnCopy.current = !supportClipboard;
+              return result;
+            })
+            .catch((error) => {
+              console.error(error);
+            });
+          break;
+        case "V":
+          // Paste - do nothing and let handleChange deal with it
+          break;
+        case "ARROWLEFT":
+          pillGroupKeyDownHandlers.ArrowLeft(event);
+          break;
+        case "ARROWRIGHT":
+          pillGroupKeyDownHandlers.ArrowRight(event);
+          break;
+        case "BACKSPACE":
+          if (cursorAtInputStart()) {
+            handleRemoveItem(event, selectedItems.length - 1);
+          }
+          break;
+        case "CONTROL":
+        case "META":
+          // Do nothing
+          break;
+        default:
+          // Otherwise, reset active items
+          setActiveIndices([]);
+      }
+    };
+
+  const handleCommonKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    const eventKey = event.key.toUpperCase();
+    if (eventKey === "ESCAPE") {
+      event.preventDefault();
+      resetInput();
+    } else if (eventKey === "TAB" && !disableAddOnBlur) {
+      // Pressing Tab adds a new value
+      handleAddItems(event, value);
+    }
+  };
+
+  const handleKeyDown: InputHTMLAttributes<HTMLTextAreaElement>["onKeyDown"] = (
+    event
+  ) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (isCtrlModifier(event)) {
+      handleCtrlModifierKeyDown(event);
+    } else {
+      let handler;
+      if (highlightedIndex == null) {
+        handler = inputKeyDownHandlers[event.key];
+        setActiveIndices([]);
+      } else {
+        handler = pillGroupKeyDownHandlers[event.key];
+      }
+
+      if (handler != null) {
+        handler(event);
+      } else {
+        handleCommonKeyDown(event);
+      }
+    }
+  };
+
+  const state: TokenizedInputNextState<Item> = {
+    value,
+    selectedItems,
+    activeIndices,
+    highlightedIndex,
+    expanded,
+  };
+
+  const eventHandlers = {
+    // onFocus is a focus on the expand button
+    // It can also be triggered by a focus on the input
+    // onBlur is a blur from the expand button when it's collapsed
+    // It can also be triggered by the clear button
+    onBlur: expanded ? handleBlur : onBlur,
+    onClick: handleClick,
+    onInputChange: handleInputChange,
+    onInputFocus: handleInputFocus,
+    onInputBlur: handleInputBlur,
+    onKeyDown: handleKeyDown,
+    onRemoveItem: handleRemoveItem,
+    onClear: handleClear,
+  };
+
+  return {
+    state,
+    firstHiddenIndex,
+    refs: {
+      textAreaRef: useForkRef(textAreaRef, inputRef),
+      pillsRef,
+      clearButtonRef,
+      expandButtonRef,
+      statusAdornmentRef,
+      containerRef: useForkRef(containerRef, containerObserverRef),
+    },
+    helpers: {
+      setValue,
+      setSelectedItems,
+      setHighlightedIndex,
+      updateExpanded,
+    },
+    inputProps: {
+      id,
+      disabled,
+      validationStatus: validationStatus ?? validationStatusProp,
+      readOnly: readOnly ?? readOnlyProp,
+      necessity: necessity,
+      focused,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy ?? ariaDescribedByProp,
+      ...state,
+      ...restProps,
+      ...(disabled ? {} : eventHandlers),
+    },
+  };
+}
diff --git a/packages/lab/stories/tokenized-input-next/tokenized-input-next.qa.stories.tsx b/packages/lab/stories/tokenized-input-next/tokenized-input-next.qa.stories.tsx
new file mode 100644
index 00000000000..02180f2da1d
--- /dev/null
+++ b/packages/lab/stories/tokenized-input-next/tokenized-input-next.qa.stories.tsx
@@ -0,0 +1,37 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { TokenizedInputNext } from "@salt-ds/lab";
+import { QAContainer, QAContainerProps } from "docs/components";
+import "docs/story.css";
+
+export default {
+  title: "Lab/Tokenized Input Next/QA",
+  component: TokenizedInputNext,
+} as Meta<typeof TokenizedInputNext>;
+
+export const QA: StoryFn<QAContainerProps> = () => (
+  <QAContainer height={500} width={1200} itemPadding={4}>
+    <TokenizedInputNext />
+    <TokenizedInputNext defaultSelected={["Mexico City"]} />
+    <TokenizedInputNext readOnly defaultSelected={["Read only value"]} />
+    <TokenizedInputNext disabled defaultSelected={["Disabled value"]} />
+    <TokenizedInputNext
+      defaultSelected={["Secondary value"]}
+      variant="secondary"
+    />
+    <TokenizedInputNext
+      defaultSelected={["Error value"]}
+      validationStatus="error"
+    />
+    <TokenizedInputNext
+      defaultSelected={["Warning value"]}
+      validationStatus="warning"
+    />
+    <TokenizedInputNext
+      defaultSelected={["Success value"]}
+      validationStatus="success"
+    />
+    <TokenizedInputNext
+      defaultSelected={["Cairo", "Mumbai", "Beijing", "Mexico City"]}
+    />
+  </QAContainer>
+);
diff --git a/packages/lab/stories/tokenized-input-next/tokenized-input-next.stories.mdx b/packages/lab/stories/tokenized-input-next/tokenized-input-next.stories.mdx
new file mode 100644
index 00000000000..8eef5f5fd00
--- /dev/null
+++ b/packages/lab/stories/tokenized-input-next/tokenized-input-next.stories.mdx
@@ -0,0 +1,108 @@
+import { TokenizedInputNext } from "@salt-ds/lab";
+import { Meta, Canvas, ArgsTable, Story } from "@storybook/addon-docs";
+import {
+  CSSClassTable,
+  CharacteristicUsage,
+} from "css-variable-docgen-components";
+import HelpAndSupport from "docs/blocks/help-and-support.doc.mdx";
+
+<Meta
+  title="Documentation/Lab/Tokenized Input Next"
+  component={TokenizedInputNext}
+  parameters={{
+    viewMode: "docs",
+  }}
+/>
+
+# Tokenized Input Next
+
+Tokenized Input Next provides an input field for text that’s converted into a pill within the field, or tokenized, when the user enters a delimiting character.
+
+The component accepts free-form text and can create an unlimited number of pills.
+
+<Canvas>
+  <Story id="lab-tokenized-input-next--default" />
+</Canvas>
+
+## Examples
+
+### Default
+
+The default component has no text input constraints, so you can use it to accept any alphanumeric character or symbol. When the user enters a text value followed by a delimiter, the value is tokenized into a pill.
+
+<Canvas>
+  <Story id="lab-tokenized-input-next--default" />
+</Canvas>
+
+### Controlled
+
+With the controlled mode, the logic of Tokenized Input Next is determined by the application and not internally, within the component. It provides developers finer-grained control of both the input value and selected items.
+
+<Canvas>
+  <Story id="lab-tokenized-input-next--controlled" />
+</Canvas>
+
+### Disabled
+
+You can disable the Tokenized Input Next if required, e.g., due to context or user permissions.
+
+<Canvas>
+  <Story id="lab-tokenized-input-next--disabled" />
+</Canvas>
+
+### With Validation
+
+If required, you can configure custom acceptance criteria. When the text value entered by the user doesn’t meet your criteria, it won’t be tokenized.
+
+In this example, we’ve configured the component to reject duplicated values.
+
+<Canvas>
+  <Story id="lab-tokenized-input-next--with-validation" />
+</Canvas>
+
+### With Customized Delimiter
+
+By default, the component tokenizes preceding text into a pill when Enter, Tab or the comma (,) key is actioned by the user.
+You can customize the key or character that separates and delimits text to fit the expected convention within your application. For example, you may choose to define a semi-colon (;) or full-stop (.) as your delimiter.
+
+<Canvas>
+  <Story id="lab-tokenized-input-next--with-customized-delimiter" />
+</Canvas>
+
+## How to use
+
+Always wrap Tokenized Input Next in a Form Field component to ensure ADA compliance—and never use it independently. The Form Field provides a label, activation line, background fill, help text and various states.
+
+### When to use Tokenized Input Next
+
+Tokenized Input Next is typically used within the context of a form. It’s ideal when you have a field that can contain multiple, specific values related to a single topic or context—and these values can be removed quickly and in their entirety. You would use the component, for example, in a field for email addresses or a fast field for a cash ticket.
+
+### When not to use Tokenized Input Next
+
+- Never use Tokenized Input Next as a standalone component; it will fail to meet ADA requirements.
+- Consider the Combo Box component if you need to generate a list of suggested values that partially match the text entered by the user.
+- Use a Combo Box when your selection is constrained to options in an existing dataset.
+
+## API
+
+```
+import { TokenizedInputNext } from "@salt-ds/lab";
+```
+
+### Props
+
+<ArgsTable of={TokenizedInputNext} />
+
+### CSS Class
+
+<CSSClassTable of={TokenizedInputNext} />
+
+### Characteristics Used
+
+<CharacteristicUsage of={TokenizedInputNext} />
+
+### Accessibility
+
+To be considered accessible within a form, the Tokenized Input Next _must_ be wrapped in a [Form Field](?path=/docs/documentation-core-form-field--docs) component, which will provide the field with a visible label, help text and a status message for validation feedback.
+
+<HelpAndSupport />
diff --git a/packages/lab/stories/tokenized-input-next/tokenized-input-next.stories.tsx b/packages/lab/stories/tokenized-input-next/tokenized-input-next.stories.tsx
new file mode 100644
index 00000000000..202a117710d
--- /dev/null
+++ b/packages/lab/stories/tokenized-input-next/tokenized-input-next.stories.tsx
@@ -0,0 +1,336 @@
+import {
+  Button,
+  FormField,
+  FormFieldHelperText as FormHelperText,
+  FormFieldLabel,
+  FormFieldLabel as FormLabel,
+  Input,
+} from "@salt-ds/core";
+import { TokenizedInputNext } from "@salt-ds/lab";
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  ChangeEventHandler,
+  SyntheticEvent,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { statesData } from "../assets/exampleData";
+
+export default {
+  title: "Lab/Tokenized Input Next",
+  component: TokenizedInputNext,
+} as Meta<typeof TokenizedInputNext>;
+
+const NUMBER_REGEX = /^(|[1-9][0-9]*)$/;
+
+const getRandomNumber = () => Math.floor(Math.random() * 99 + 1);
+
+const TokenizedInputNextTemplate: StoryFn<typeof TokenizedInputNext> = (
+  props
+) => {
+  const handleChange = (
+    event: SyntheticEvent,
+    selectedItems: unknown[] | undefined
+  ) => {
+    console.log("selection changed", selectedItems);
+  };
+
+  return (
+    <TokenizedInputNext
+      style={{ width: "266px" }}
+      onChange={handleChange}
+      {...props}
+    />
+  );
+};
+
+export const Default = TokenizedInputNextTemplate.bind({});
+Default.args = {};
+
+export const WithCollapsedButton = TokenizedInputNextTemplate.bind({});
+WithCollapsedButton.args = {
+  defaultSelected: statesData,
+};
+
+export const Controlled: StoryFn<typeof TokenizedInputNext> = () => {
+  const buttonsRef = useRef<HTMLDivElement>(null);
+
+  const [option, setOption] = useState(42);
+  const [inputValue, setInputValue] = useState("");
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+
+  const [offsetHeight, setOffsetHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    if (buttonsRef.current) {
+      setOffsetHeight(buttonsRef.current.getBoundingClientRect().height);
+    }
+  }, [buttonsRef]);
+
+  const handleAddRandomOption = () => {
+    setSelectedItems((prevSelectedItems) =>
+      prevSelectedItems.concat(String(option))
+    );
+    setOption(getRandomNumber());
+  };
+
+  const handleInputChange: ChangeEventHandler<HTMLTextAreaElement> = (
+    event
+  ) => {
+    const newValue = event.target.value.trim();
+
+    if (NUMBER_REGEX.exec(newValue)) {
+      setInputValue(newValue);
+    }
+  };
+  const handleChange = (
+    event: SyntheticEvent,
+    selectedItems: unknown[] | undefined
+  ) => {
+    setInputValue("");
+    setSelectedItems(selectedItems as string[]);
+  };
+
+  const handleClear = () => {
+    setInputValue("");
+    setSelectedItems([]);
+  };
+
+  return (
+    <div
+      style={{
+        width: "calc(100vw - 40px)",
+        height: "50vh",
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          maxWidth: 292,
+        }}
+      >
+        <div
+          ref={buttonsRef}
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            marginBottom: 5,
+          }}
+        >
+          <Button onClick={handleAddRandomOption}>Add {option}</Button>
+        </div>
+        <div style={{ height: `calc(100% - ${offsetHeight}px)` }}>
+          <FormField>
+            <FormLabel>Natural numbers only</FormLabel>
+            <TokenizedInputNext
+              onChange={handleChange}
+              onClear={handleClear}
+              onInputChange={handleInputChange}
+              selectedItems={selectedItems}
+              value={inputValue}
+            />
+          </FormField>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Disabled: StoryFn<typeof TokenizedInputNext> = () => {
+  return (
+    <div
+      style={{
+        width: "calc(100vw - 40px)",
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <FormField disabled style={{ maxWidth: 292 }}>
+        <FormFieldLabel>Enter a value</FormFieldLabel>
+        <TokenizedInputNext
+          disabled
+          defaultSelected={["Value 1", "Value 2", "Value 3"]}
+        />
+      </FormField>
+    </div>
+  );
+};
+
+type Validator = (values: string[]) => string | null;
+
+export const WithValidation: StoryFn<typeof TokenizedInputNext> = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+  const [exceptions, setExceptions] = useState<string[]>([]);
+
+  const validations: Validator[] = [
+    (newItems) => {
+      const upperCased = newItems.map((value) => value.toUpperCase());
+      const validated: string[] = [];
+
+      for (let i = 0; i < upperCased.length; i++) {
+        if (validated.indexOf(upperCased[i]) !== -1) {
+          return `'${newItems[i]}' is already added to the selection.`;
+        }
+        validated.push(upperCased[i]);
+      }
+
+      return null;
+    },
+  ];
+
+  const handleInputChange: ChangeEventHandler<HTMLTextAreaElement> = (
+    event
+  ) => {
+    setExceptions([]);
+    setInputValue(event.target.value);
+  };
+  const handleChange = (
+    event: SyntheticEvent,
+    selectedItems: unknown[] | undefined
+  ) => {
+    const newExceptions = validations.reduce<string[]>((results, validate) => {
+      const result = validate(selectedItems as string[]);
+      return result != null ? results.concat(result) : results;
+    }, []);
+
+    if (newExceptions.length === 0) {
+      setInputValue("");
+      setSelectedItems(selectedItems as string[]);
+    } else {
+      setExceptions(newExceptions);
+    }
+  };
+
+  const handleClear = () => {
+    setExceptions([]);
+    setInputValue("");
+    setSelectedItems([]);
+  };
+
+  return (
+    <div
+      style={{
+        width: "calc(100vw - 40px)",
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <FormField
+        style={{ maxWidth: 292 }}
+        validationStatus={exceptions.length > 0 ? "error" : undefined}
+      >
+        <FormLabel>No duplication</FormLabel>
+        <TokenizedInputNext
+          onChange={handleChange}
+          onClear={handleClear}
+          onInputChange={handleInputChange}
+          selectedItems={selectedItems}
+          value={inputValue}
+        />
+        <FormHelperText>{exceptions.join(", ")}</FormHelperText>
+      </FormField>
+    </div>
+  );
+};
+
+export const WithCustomizedDelimiter: StoryFn<
+  typeof TokenizedInputNext
+> = () => {
+  const buttonsRef = useRef<HTMLDivElement>(null);
+
+  const savedDelimiter = useRef(",");
+  const [delimiter, setDelimiter] = useState(",");
+  const [isLocked, updateLock] = useState(true);
+  const [offsetHeight, setOffsetHeight] = useState(0);
+
+  useEffect(() => {
+    if (!isLocked) {
+      savedDelimiter.current = delimiter;
+    }
+  }, [isLocked, delimiter]);
+
+  useLayoutEffect(() => {
+    if (buttonsRef.current) {
+      setOffsetHeight(buttonsRef.current.getBoundingClientRect().height);
+    }
+  }, []);
+
+  const handleChange = (
+    event: SyntheticEvent,
+    selectedItems: unknown[] | undefined
+  ) => {
+    console.log("selection changed", selectedItems);
+  };
+
+  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    setDelimiter(event.target.value);
+  };
+
+  return (
+    <div
+      style={{
+        width: "calc(100vw - 40px)",
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          maxWidth: 292,
+        }}
+      >
+        <div
+          ref={buttonsRef}
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            paddingBottom: 10,
+          }}
+        >
+          {isLocked ? (
+            <div>
+              Using delimiter &quot;<strong>{delimiter}</strong>&quot;
+            </div>
+          ) : (
+            <FormField style={{ height: `calc(100% - ${offsetHeight}px)` }}>
+              <FormFieldLabel>Enter a delimiter</FormFieldLabel>
+              <Input
+                inputProps={{ maxLength: 1 }}
+                onChange={handleInputChange}
+                style={{ maxWidth: 180 }}
+              />{" "}
+            </FormField>
+          )}
+          <Button
+            onClick={() => updateLock((locked) => !locked)}
+            style={{ marginLeft: 10 }}
+          >
+            {isLocked ? "Modify" : "Save"}
+          </Button>
+        </div>
+        <FormField style={{ height: `calc(100% - ${offsetHeight}px)` }}>
+          <FormFieldLabel>Enter a value</FormFieldLabel>
+          <TokenizedInputNext
+            delimiters={[savedDelimiter.current]}
+            disabled={!isLocked}
+            defaultSelected={["Value 1", "Value 2"]}
+            key={`input-delimiter-${savedDelimiter.current}`}
+            onChange={handleChange}
+          />
+        </FormField>
+      </div>
+    </div>
+  );
+};
diff --git a/site/docs/components/tokenized-input-next/accessibility.mdx b/site/docs/components/tokenized-input-next/accessibility.mdx
new file mode 100644
index 00000000000..b3bd5b88728
--- /dev/null
+++ b/site/docs/components/tokenized-input-next/accessibility.mdx
@@ -0,0 +1,103 @@
+---
+# Leave the frontmatter as is
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+- Wrap the component in [`FormField`](/salt/components/form-field) to provide the field with a visible label, help text and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information [in the W3C form instructions](https://www.w3.org/WAI/tutorials/forms/instructions/).
+
+- The component clips text that extends beyond the visible area. This behavior is common to all states, i.e., default, read-only and disabled—whether or not the component has focus. To view the text in its entirety, the user can traverse the characters using the cursor.
+
+### Keyboard interactions
+
+<KeyboardControls>
+  <KeyboardControl keyOrCombos="Tab">
+
+    - If focus is above the component, Tab moves focus to the component. The input becomes active, with a visible text cursor.
+    - If focus is in the component (i.e., in the text input or on a token), Tab moves focus to the field’s **X** button. If there’s text in the input field, Tab tokenizes the text.
+    - If focus is on the **X** button, Tab moves focus out of the component to the next component in the tab order.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Shift + Tab">
+
+    - If focus is below the component, this action moves the focus to the collapsed button.
+    - If focus is in the **X** button, this action moves focus to the text input and the text cursor is displayed.
+    - If focus is in the text input or on a token, this action moves focus out of the component to the previous component in the tab order. If there’s text in the input field, this action tokenizes the text.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Enter / Comma">
+
+    - Default delimiting character. This action tokenizes the preceding text, if there’s any, within the input field.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Escape">
+
+    - Escape clears the current text from the input field without tokenizing it.
+    - If highlight is on a pill, Escape clears the pill from the group.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Right arrow">
+
+    - If visual focus is on a token, Right arrow moves visual focus to the next token.
+
+    - If there are multiple lines and visual focus is on the token at the end of the current line, Right arrow wraps focus to the first token on the following line.
+
+    - If visual focus is on the last token, Right arrow removes focus from the tokens. The text input becomes active, with a visible text cursor.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Left arrow">
+
+    - If the text cursor immediately succeeds the token group, Left arrow moves visual focus to the last token.
+
+    - If visual focus is on a token, Left arrow moves focus to the previous token.
+
+    - If there are multiple lines and visual focus is on the token at the start of the current line, Left arrow wraps focus to the last token in the preceding line.
+
+    - If visual focus is on the first token, Left arrow does nothing.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Backspace">
+
+    - If the text cursor immediately succeeds the token group, Backspace moves visual focus to the last token.
+
+    - If visual focus is on a token, Backspace removes it from the field and sets focus on the preceding token.
+
+    - If there’s only one token with visual focus, Backspace removes the token. The text input becomes active, with a visible text cursor.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Home">
+
+    - If there’s text in the input field, Home moves the cursor to the first character position.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="End">
+
+    - If there’s text in the input field, End moves the cursor to the last character position.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Control + A / Command + A">
+
+    - This action highlights all values, text and tokens, within the field.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Control + Backspace / Option + Backspace">
+
+    - This action removes the entire word or token immediately preceding the text cursor.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Control + Arrow keys / Option + Arrow keys">
+
+    - This action moves the cursor or visual focus one word or token at a time. If it reaches the beginning or end of the field, does nothing.
+
+  </KeyboardControl>
+  <KeyboardControl keyOrCombos="Shift + Home / Shift + End">
+
+    - If there’s text in the input field, this action immediately drags selection from the current location of the text cursor to the start/end of the field.
+
+  </KeyboardControl>
+</KeyboardControls>
diff --git a/site/docs/components/tokenized-input-next/examples.mdx b/site/docs/components/tokenized-input-next/examples.mdx
new file mode 100644
index 00000000000..f0f485d7a18
--- /dev/null
+++ b/site/docs/components/tokenized-input-next/examples.mdx
@@ -0,0 +1,34 @@
+---
+# Leave the frontmatter as is
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+<LivePreviewControls>
+  <LivePreview componentName="tokenized-input-next" exampleName="Default" >
+
+    ### Default
+
+    The default component has no text input constraints, so you can use it to accept any alphanumeric character or symbol. When the user enters a text value followed by a delimiter, the value is tokenized into a pill.
+
+  </LivePreview>
+  <LivePreview componentName="tokenized-input-next" exampleName="Disabled">
+
+    ### Disabled
+
+    You can disable the component if required, e.g., due to context or user permissions.
+
+  </LivePreview>
+  <LivePreview componentName="tokenized-input-next" exampleName="WithCustomizedDelimiter">
+
+    ### With customized delimiter
+
+    By default, the component tokenizes the preceding text into a pill when the user presses Enter, Tab or the comma (,) key. To customize the key or character that separates and delimits text to fit the expected convention within your application, set a custom key or set of keys as `delimiter`. For example, you can define a semi-colon (;) or full-stop (.) as your delimiter.
+
+  </LivePreview>
+</LivePreviewControls>
diff --git a/site/docs/components/tokenized-input-next/index.mdx b/site/docs/components/tokenized-input-next/index.mdx
new file mode 100644
index 00000000000..3b2dc3655af
--- /dev/null
+++ b/site/docs/components/tokenized-input-next/index.mdx
@@ -0,0 +1,19 @@
+---
+title: Tokenized input
+data:
+  description: Tokenized input provides an input field for text that’s converted into a pill within the field, or tokenized, when the user enters a delimiting character.
+
+  # Fill in the info from the content template's "Metadata" table below.
+  # To omit optional items, comment them out with #
+  sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/tokenized-input-next/TokenizedInputNext.tsx"
+  package:
+    name: "@salt-ds/lab"
+  alsoKnownAs: ["Form Token Field", "Pills Input", "Tags Field", "Tags Input"]
+  relatedComponents: [{ name: "ComboBox", relationship: "similarTo" }]
+  # stickerSheet: "https://figma.com/..."
+
+# Leave this as is
+layout: DetailComponent
+---
+
+{/* This area stays blank */}
diff --git a/site/docs/components/tokenized-input-next/usage.mdx b/site/docs/components/tokenized-input-next/usage.mdx
new file mode 100644
index 00000000000..812c1303c86
--- /dev/null
+++ b/site/docs/components/tokenized-input-next/usage.mdx
@@ -0,0 +1,31 @@
+---
+# Leave the frontmatter as is
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+### Using the component
+
+The component is typically used in a form. It’s ideal for fields that can contain multiple, specific values related to a single topic or context—and these values can be removed quickly and in their entirety. You would use the component, for example, in a field for email addresses or a fast field for a cash ticket.
+
+### When not to use
+
+- To generate a list of suggested values that partially match the text entered by the user. Instead, use [`ComboBoxNext`](/salt/components/combo-box/).
+- To choose exclusively from options in an existing dataset. Instead, use [`ComboBoxNext`](/salt/components/combo-box/).
+
+### Import
+
+To import `TokenizedInputNext` from the lab Salt package, use:
+
+```js
+import { TokenizedInputNext } from "@salt-ds/lab";
+```
+
+### Props
+
+<PropsTable packageName="lab" componentName="TokenizedInputNext" />
diff --git a/site/src/examples/tokenized-input-next/Default.tsx b/site/src/examples/tokenized-input-next/Default.tsx
new file mode 100644
index 00000000000..b0bc62bf26a
--- /dev/null
+++ b/site/src/examples/tokenized-input-next/Default.tsx
@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+import { TokenizedInputNext } from "@salt-ds/lab";
+
+const handleChange = (selectedItems: unknown) => {
+  console.log("selection changed", selectedItems);
+};
+
+export const Default = (): ReactElement => (
+  <TokenizedInputNext style={{ width: "266px" }} onChange={handleChange} />
+);
diff --git a/site/src/examples/tokenized-input-next/Disabled.tsx b/site/src/examples/tokenized-input-next/Disabled.tsx
new file mode 100644
index 00000000000..3879db46398
--- /dev/null
+++ b/site/src/examples/tokenized-input-next/Disabled.tsx
@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+import { TokenizedInputNext } from "@salt-ds/lab";
+
+export const Disabled = (): ReactElement => (
+  <TokenizedInputNext
+    style={{ width: "266px" }}
+    disabled
+    defaultSelected={["Value 1", "Value 2", "Value 3"]}
+  />
+);
diff --git a/site/src/examples/tokenized-input-next/WithCustomizedDelimiter.tsx b/site/src/examples/tokenized-input-next/WithCustomizedDelimiter.tsx
new file mode 100644
index 00000000000..8455cbdc279
--- /dev/null
+++ b/site/src/examples/tokenized-input-next/WithCustomizedDelimiter.tsx
@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { TokenizedInputNext } from "@salt-ds/lab";
+
+export const WithCustomizedDelimiter = (): ReactElement => (
+  <TokenizedInputNext style={{ width: "266px" }} delimiters={[";"]} />
+);
diff --git a/site/src/examples/tokenized-input-next/index.ts b/site/src/examples/tokenized-input-next/index.ts
new file mode 100644
index 00000000000..cfdab87e8e3
--- /dev/null
+++ b/site/src/examples/tokenized-input-next/index.ts
@@ -0,0 +1,3 @@
+export * from "./Default";
+export * from "./Disabled";
+export * from "./WithCustomizedDelimiter";