feat(text-input): add new next component #7557

tomdavies73 · 2025-09-30T15:46:37Z

Proposed behaviour

Adds the TextInput component, a much simpler alternative to Textbox with a smaller, less complex interface. The component is built to the Design Systems specifications and uses the brand-new fusion tokens.

The component disregards all current internal legacy and has been built from the ground up using basic HTML with additional styling added via designs, and some additional layout elements to support specific visual patterns. The component also supports the addition of hint text and error/warning messaging and borders.

The component interface is as close to the HTML elements attributes as possible, with only additional props added to aid specific necessary functionality or designs.

Current behaviour

Currently, there is no TextInput component, just a Textbox component which has been marked as legacy and is not aligned with the design system.

Checklist

QA

Tested in provided StackBlitz sandbox/Storybook
Add new Playwright test coverage if required
Carbon implementation matches Design System/designs
UI Tests GitHub check reviewed if required

Additional context

Testing instructions

edleeks87

@ljemmo @harpalsingh do we have any designs for inline labels with an inputHint? the alignment looks a little off on this but I can't compare it to anything

edleeks87 · 2025-11-26T07:56:43Z

src/__internal__/validation-message/__next__/validation-message.style.ts

+        ? "var(--input-validation-label-error)"
+        : "var(--input-validation-label-warn)"};
+
+      font-family: var(--fontFamiliesDefault);


question: why aren't we using the new tokens for the font?

comment: The font tokens contain everything already as far as I know so you could just set font unless I'm missing something, you might need to pick the relevant one based on size and error vs warning though (worth checking tokens with DS/UX though)

--global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI; --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI; --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI; --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI; --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI; --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI; --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI; --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;

font-family: var(--fontFamiliesDefault); font-size: ${isLarge ? "var(--global-font-static-body-regular-l)" : "var(--global-font-static-body-regular-m)"}; font-style: normal; font-weight: ${isError ? "500" : "400"}; line-height: 150%;

can be

${isLarge && css` font: ${isError ? "var(--global-font-static-comp-medium-l)" : ""var(--global-font-static-comp-regular-l)"}; `} ${!isLarge && css` font: ${isError ? "var(--global-font-static-comp-medium-m)" : ""var(--global-font-static-comp-regular-m)"}; `}

@edleeks87 i don't believe there's any nice way to show hint text inline. When switching it on within figma it looks identical to Tom's implementation. TBF inline is generally discouraged. Where is see it used, it never has hint text enabled. e.g for quick filtering on top of tables. I think we have 2 options:

Not allow hint text on inline and restrict from a code POV

just leave as is knowing that its never going to be used and doesn't matter how it therefore appears.

I think personally we should keep inline input hints, if we're providing the capacity to make labels inline via labelInline, it makes sense to have everything available in both label states. We've made accommodations for error states when the label is inline, it makes sense in my opinion to make those accommodations for the hint text too. What do we think @edleeks87 @ljemmo ?

edleeks87 · 2025-11-26T08:40:03Z

src/components/textbox/__next__/__internal__/error-border/error-border.style.ts

+      ? "var(--input-validation-bar-warn)"
+      : "var(--input-validation-border-error)"};
+  `}
+  transform: scaleX(1);


question: is this transform doing anything here as it's scaling to 100% with no animation?

So I added this as when the window is being repositioned the absolutely positioned error border can sometimes shrink when the label is inline. We didn't observe this previously as the error border was always in a fixed position, however when inline it is in the centre of the screen and needs to reposition. Adding the transform stopped this shrinking from occurring, and it appeared to be the only solution I could find that worked.

edleeks87 · 2025-11-26T08:41:07Z

src/components/textbox/__next__/__internal__/hint-text/hint-text.style.ts

+      ? "var(--input-labelset-label-disabled)"
+      : "var(--input-labelset-label-alt)"};
+
+  font-family: var(--fontFamiliesDefault);


Comment: same as above wrt to using font and the token etc

edleeks87 · 2025-11-26T08:43:28Z

src/components/textbox/__next__/__internal__/input/input.component.tsx

+    const stateProps = { disabled, readOnly };
+
+    useEffect(() => {
+      if (autoFocus && inputRef && "current" in inputRef) {


suggestion (non-blocking): what you have is fine (don't need to check inputRef as if current is in it it's truthy) but we've done the following elsewhere in the codebase so I think for consistency sake it's worthwhile adopting it

const setRefs = (node: HTMLInputElement | null) => { internalRef.current = node; if (typeof ref === "function") { ref(node); } else if (ref) { (ref as React.MutableRefObject<HTMLInputElement | null>).current = node; } }; const stateProps = { disabled, readOnly }; useEffect(() => { if (autoFocus) { internalRef.current?.focus(); } }, [autoFocus]);

suggestion (non-blocking): we could actually make this a custom (internal) hook so it's DRY and reuse the pattern where needed

// useCombinedRefs import {MutableRefObject, RefCallback} from "react"; export default function combineRefs<T = unknown>( ...refs: (MutableRefObject<T | null> | RefCallback<T> | null | undefined)[] ): RefCallback<T> { return (node: T | null) => { refs.forEach((ref) => { if (!ref) return; if (typeof ref === "function") { ref(node); } else { ref.current = node; } }); }; };

// input.component ... const combinedRef = useCombinedRefs(internalRef, ref); ... useEffect(() => { if (autoFocus) { internalRef.current?.focus(); } }, [autoFocus]); ... <input type="text" ref={combinedRef} {...stateProps} {...props} />

edleeks87 · 2025-11-26T09:03:33Z

src/components/textbox/__next__/__internal__/error-border/error-border.style.ts

comment (non-blocking): if this is the same for all components I wonder if it's more appropriate in the shared _internal_ directory (still as a _next_)

src/components/textbox/__next__/__internal__/error-border/error-border.style.ts

edleeks87 · 2025-11-26T10:05:59Z

src/components/textbox/__next__/text-input.style.ts

+
+interface StyledTextInputProps {


interface StyledTextInputProps {
$labelInline?: boolean;
$containerWidth?: number;
$size?: "small" | "medium" | "large";
}

only size is needed really rest if up to you

edleeks87 · 2025-11-26T10:07:23Z

src/components/textbox/__next__/text-input.style.ts

+  labelSetWidth?: number;
+}
+
+interface InputSetProps {


interface InputSetProps {
$inputWidth?: number;
$size?: "small" | "medium" | "large";
}

edleeks87 · 2025-11-26T10:09:03Z

docs/validations.stories.tsx

          Fill in all fields marked with
        </RequiredFieldsIndicator>
-        <Textbox
+        <TextInput


comment: we need to consider what we need to still capture for the old textbox visual regression wise, again worth discussing with the rest of the team in slack

Agreed - maybe use one TextInput and one Textbox to cover off both?

damienrobson-sage · 2025-11-27T11:28:26Z

docs/validations.stories.tsx

          Fill in all fields marked with
        </RequiredFieldsIndicator>
-        <Textbox
+        <TextInput


Agreed - maybe use one TextInput and one Textbox to cover off both?

damienrobson-sage · 2025-11-27T11:31:39Z

src/__internal__/validation-message/__next__/validation-message.style.ts

+      font-weight: ${isError ? "500" : "400"};
+      line-height: 150%;


question: would these need to be tokens, too? Or are we leaving those aside for now?

question: would these need to be tokens, too? Or are we leaving those aside for now?

@damienrobson-sage we don't currently distribute core tokens like line-height or font-weight. instead Font tokens can be applied which contain those core values.

Yep, this is due to a little misunderstanding on my part, some hard coded font-familys, weights, colours, sizes etc. have been used instead of the font shorthand with the corresponding font token. I'll make sure this is addressed where i've used them 👍

damienrobson-sage · 2025-11-27T11:34:22Z

src/components/textbox/__next__/__internal__/hint-text/hint-text.component.tsx

+import StyledHintText from "./hint-text.style";
+
+export interface HintTextProps {
+  /** Children elements */


nitpick: Child elements or Children 😆

damienrobson-sage · 2025-11-27T11:40:10Z

src/components/textbox/__next__/__internal__/input/input.component.tsx

+  /** The width of the input as a percentage (e.g., 50 for 50%) */
+  inputWidth?: number;


question: just to confirm, definitely only percentage values to be supported?

The DS seem to point toward using percentages for widths on the component, I feel like it keeps things consistent and adaptive. Also gives us more granular control, opposed to supporting any string values etc.

Perfect, just double-checking given some components support "any valid CSS values" 👍

damienrobson-sage · 2025-11-27T11:42:42Z

src/components/textbox/__next__/__internal__/label/label.component.tsx

+  );
+};
+
+export default React.memo(Label);


question: what's the reason for the manual memoisation?

The old internal label component was memorized, so I followed suit here, after thinking about it, I don't think it's really needed, so I will remove 👍

tomdavies73 self-assigned this Sep 30, 2025

tomdavies73 requested review from a team as code owners September 30, 2025 15:46

tomdavies73 added DO NOT MERGE Work in progress This is a WIP PR so may not be ready for review labels Sep 30, 2025

tomdavies73 force-pushed the FE-7230 branch 2 times, most recently from 3fe2137 to cb48059 Compare October 7, 2025 15:54

tomdavies73 marked this pull request as draft November 10, 2025 16:00

tomdavies73 force-pushed the FE-7230 branch 2 times, most recently from 40ef696 to ee710ba Compare November 12, 2025 15:15

tomdavies73 marked this pull request as ready for review November 12, 2025 16:04

tomdavies73 force-pushed the FE-7230 branch 2 times, most recently from d4b47d4 to 6fedb6c Compare November 20, 2025 14:41

tomdavies73 requested a review from a team as a code owner November 20, 2025 14:41

tomdavies73 marked this pull request as draft November 20, 2025 15:45

tomdavies73 force-pushed the FE-7230 branch 4 times, most recently from 3ea2dc5 to 5997a89 Compare November 25, 2025 16:57

tomdavies73 added Pending Review Pending QA Pending UX QA and removed DO NOT MERGE Work in progress This is a WIP PR so may not be ready for review labels Nov 25, 2025

edleeks87 added the Squad Front End label Nov 26, 2025

edleeks87 reviewed Nov 26, 2025

View reviewed changes

tomdavies73 added 2 commits November 26, 2025 10:40

feat(text-input): add new next component

d225b11

chore(validation-message): add new next version of internal component

2dbc5bb

tomdavies73 force-pushed the FE-7230 branch from 5997a89 to 2dbc5bb Compare November 26, 2025 10:40

damienrobson-sage reviewed Nov 27, 2025

View reviewed changes

tomdavies73 changed the title ~~feat(textbox): align with DS - WIP~~ feat(text-input): add new next component Nov 28, 2025

		/** The width of the input as a percentage (e.g., 50 for 50%) */
		inputWidth?: number;

feat(text-input): add new next component #7557

Are you sure you want to change the base?

feat(text-input): add new next component #7557

Conversation

tomdavies73 commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed behaviour

Current behaviour

Checklist

QA

Additional context

Testing instructions

Uh oh!

edleeks87 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

tomdavies73 commented Sep 30, 2025 •

edited

Loading