diff --git a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx
index cf9581196..20def92a1 100644
--- a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx
+++ b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx
@@ -9,6 +9,7 @@ import action from "./examples/action";
import functionSuggestions from "./examples/functionSuggestions";
import errorHandling from "./examples/errorHandling";
import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
+import StatusBadge from "@/common/StatusBadge";
const actionTypeString = `{
icon?: string | (React.ReactNode
@@ -32,13 +33,32 @@ const sections = [
- | action |
- {actionTypeString}
+
+
+ alignment
+
+ |
+
+ 'left' | 'right'
+ |
+
+ Sets text-align CSS property inside the input. See{" "}
+
+ MDN
+ {" "}
+ for further information.
|
- Action to be displayed on the right side of the input.
+ 'left'
+ |
+
+
+ | action |
+
+ {actionTypeString}
|
+ Action to be displayed on the right side of the input. |
- |
diff --git a/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx b/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx
index eaac08c87..c25ea1d01 100644
--- a/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx
+++ b/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx
@@ -254,6 +254,11 @@ const sections = [
Support various states consistently: reflect focus, disabled, error, and read-only states
with distinct, accessible visual cues.
+
+ Apply appropiate alignment: It is recommended to use left alignment in general, except
+ when there is a specific need for right alignment, such as in currency inputs or numeric fields, generally
+ using a suffix.
+
),
},
diff --git a/packages/lib/src/text-input/TextInput.stories.tsx b/packages/lib/src/text-input/TextInput.stories.tsx
index 765812582..38281aba1 100644
--- a/packages/lib/src/text-input/TextInput.stories.tsx
+++ b/packages/lib/src/text-input/TextInput.stories.tsx
@@ -139,7 +139,16 @@ const TextInput = () => (
action={action}
/>
- {" "}
+
+
+
+
+
+
+
+
+
+
inputStylesByState(disabled, error, readOnly)}
`;
-const Input = styled.input`
+const Input = styled.input<{
+ alignment: TextInputPropsType["alignment"];
+}>`
background: none;
border: none;
outline: none;
@@ -79,6 +81,7 @@ const Input = styled.input`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ ${({ alignment }) => `text-align: ${alignment}`};
::placeholder {
color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-strong)")};
@@ -105,6 +108,7 @@ const AutosuggestWrapper = ({ condition, wrapper, children }: AutosuggestWrapper
const DxcTextInput = forwardRef(
(
{
+ alignment = "left",
action,
ariaLabel = "Text input",
autocomplete = "off",
@@ -505,6 +509,7 @@ const DxcTextInput = forwardRef(
)}