diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
index 7d40f60..3371587 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
@@ -46,7 +46,7 @@ export const Login = () => {
display: "flex",
flexDirection: "column",
gap: "1rem",
- width: "400px",
+ width: "300px",
}}
onSubmit={handleSubmit(onSubmit)}
>
@@ -54,10 +54,10 @@ export const Login = () => {
className="fs-h3 fw-bold clr-greyscale-900"
style={{ textAlign: "center" }}
>
- Please log-in!
+ Log in
{
label="Password"
state={getFieldState("password", formState)}
type="password"
- text={getFieldErrorMessage("password", formState)}
+ text={
+ getFieldErrorMessage("password", formState) || "Forgot your password?"
+ }
fullWidth={true}
{...register("password")}
/>
@@ -79,7 +81,13 @@ export const Login = () => {
{...register("rememberMe")}
/>
-
+
+
);
};
diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
index f978833..4c8c3fe 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
@@ -64,6 +64,31 @@ export const Sports = () => {
>
Register
+
+
{
/>
-
-
-
-
-
{
fullWidth={true}
/>
-
+
diff --git a/packages/react/src/components/Forms/Examples/index.stories.tsx b/packages/react/src/components/Forms/Examples/index.stories.tsx
index d554789..3d85297 100644
--- a/packages/react/src/components/Forms/Examples/index.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/index.stories.tsx
@@ -21,20 +21,20 @@ export const Login = () => {
display: "flex",
flexDirection: "column",
gap: "1rem",
- width: "400px",
+ width: "300px",
}}
>
- Please log-in!
+ Log in
-
+
{
-
+
+
);
};
@@ -88,23 +94,35 @@ export const Application = () => {
fullWidth={true}
text="Only @acme.com domain is authorized"
/>
-
-
- Your curriculum vitae
-
+
+
+
+ Your curriculum vitae
+
+
+
-
+
);
@@ -127,16 +145,19 @@ export const Sports = () => {
>
Register
+
-
-
-
-
-