From 0fc77c9bc9722c24d88d7212eee22accbe8984e1 Mon Sep 17 00:00:00 2001
From: jialecl <jialestrabajos@gmail.com>
Date: Fri, 24 Jul 2026 09:21:27 +0200
Subject: [PATCH] Improved localization example

---
 .../localization/examples/localization.tsx    | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/apps/website/screens/guidelines/localization/examples/localization.tsx b/apps/website/screens/guidelines/localization/examples/localization.tsx
index d55fbb23d..f15d3daf0 100644
--- a/apps/website/screens/guidelines/localization/examples/localization.tsx
+++ b/apps/website/screens/guidelines/localization/examples/localization.tsx
@@ -1,21 +1,35 @@
-import { DxcDateInput, HalstackProvider, DxcInset } from "@dxc-technology/halstack-react";
+import { DxcDateInput, DxcTimeInput, HalstackProvider, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
 
 const code = `() => {
 
+const labels = {
+  formFields: {
+    optionalLabel: "(Freiwillig)",
+  },
+};
+
   return (
-    <HalstackProvider localeTag="de-DE">
+    <HalstackProvider localeTag="de-DE" labels={labels}>
       <DxcInset space="var(--spacing-padding-xl)">
-        <DxcDateInput
-          label="Date"
-          placeholder="Select a date"
-          optional
-        />
+        <DxcFlex direction="column" gap="2rem">
+          <DxcDateInput
+            label="Date"
+            placeholder="Select a date"
+            optional
+          />
+          <DxcTimeInput
+            label="Time"
+            optional
+          />
+        </DxcFlex>
       </DxcInset>
     </HalstackProvider>
   );
 }`;
 
 const scope = {
+  DxcFlex,
+  DxcTimeInput,
   DxcDateInput,
   HalstackProvider,
   DxcInset,