Skip to content

Commit cf714ef

Browse files
rishabhpoddarrishabhpoddar
authored
Merge pull request #744 from supertokens/docs-for-input-component
Add docs for new props on fe config, inputComponent, getDefaultValue, nonOptionalErrorMsg
2 parents 1992441 + 9565327 commit cf714ef

34 files changed

+1613
-204
lines changed

‎v2/emailpassword/common-customizations/signin-form/changing-field-labels.mdx

+2-42
Original file line numberDiff line numberDiff line change
@@ -4,46 +4,6 @@ title: Changing Field Labels and Placeholder text
44
hide_title: true
55
---
66

7-
import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
8-
import TabItem from '@theme/TabItem';
7+
import Redirector from '/src/components/Redirector'
98

10-
# Changing Field Labels and Placeholder text
11-
12-
If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend.
13-
14-
<FrontendSDKTabs>
15-
<TabItem value="reactjs">
16-
17-
```tsx
18-
import SuperTokens from "supertokens-auth-react";
19-
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
20-
import Session from "supertokens-auth-react/recipe/session";
21-
22-
SuperTokens.init({
23-
appInfo: {
24-
apiDomain: "...",
25-
appName: "...",
26-
websiteDomain: "..."
27-
},
28-
recipeList: [
29-
EmailPassword.init({
30-
signInAndUpFeature: {
31-
signInForm: {
32-
// highlight-start
33-
formFields: [{
34-
id: "email",
35-
label: "customFieldName",
36-
placeholder: "Custom value"
37-
}]
38-
}
39-
// highlight-end
40-
}
41-
}),
42-
Session.init()
43-
]
44-
});
45-
```
46-
</TabItem>
47-
</FrontendSDKTabs>
48-
49-
<img alt="Prebuilt form UI with custom labels and placeholder" src="/img/emailpassword/modified-formfields.png" />
9+
<Redirector to={"./customising-each-form-field"}/>

‎v2/emailpassword/common-customizations/signin-form/customising-each-form-field.mdx

+195
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
---
2+
id: customising-each-form-field
3+
title: Customising each form field
4+
hide_title: true
5+
show_ui_switcher: true
6+
---
7+
8+
<!-- COPY DOCS -->
9+
<!-- ./emailpassword/common-customizations/signin-form/customising-each-form-field.mdx -->
10+
11+
import TabItem from '@theme/TabItem'
12+
import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
13+
import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs";
14+
15+
16+
# Customising each form field
17+
18+
19+
<PreBuiltOrCustomUISwitcher>
20+
21+
<CustomUIContent>
22+
23+
:::caution Not applicable
24+
This section is not relevant for custom UI, as you will be creating your own UI and already have control over the form fields.
25+
:::
26+
27+
</CustomUIContent>
28+
29+
<PreBuiltUIContent>
30+
31+
* [Modify Labels and Placeholder Text](#modify-labels-and-placeholder-text)
32+
* [Setting Default Values](#setting-default-values)
33+
* [Changing Optional Error Message](#changing-optional-error-message)
34+
35+
36+
## Modify Labels and Placeholder Text
37+
38+
If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend.
39+
40+
<FrontendPreBuiltUITabs>
41+
<TabItem value="reactjs">
42+
43+
```tsx
44+
import SuperTokens from "supertokens-auth-react";
45+
import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}";
46+
import Session from "supertokens-auth-react/recipe/session";
47+
48+
SuperTokens.init({
49+
appInfo: {
50+
apiDomain: "...",
51+
appName: "...",
52+
websiteDomain: "..."
53+
},
54+
recipeList: [
55+
^{recipeNameCapitalLetters}.init({
56+
signInAndUpFeature: {
57+
signInForm: {
58+
// highlight-start
59+
formFields: [{
60+
id: "email",
61+
label: "customFieldName",
62+
placeholder: "Custom value"
63+
}]
64+
}
65+
// highlight-end
66+
}
67+
}),
68+
Session.init()
69+
]
70+
});
71+
```
72+
</TabItem>
73+
</FrontendPreBuiltUITabs>
74+
75+
<img alt="Prebuilt form UI with custom labels and placeholder" src="/img/^{codeImportRecipeName}/modified-formfields.png" />
76+
77+
</PreBuiltUIContent>
78+
</PreBuiltOrCustomUISwitcher>
79+
80+
81+
<PreBuiltOrCustomUISwitcher>
82+
<PreBuiltUIContent>
83+
84+
## Setting Default Values
85+
86+
To fill in the form fields with preset values in the login widget, add a `getDefaultValue` option to the `formFields` config when initializing SuperTokens on the frontend.
87+
88+
<FrontendPreBuiltUITabs>
89+
<TabItem value="reactjs">
90+
91+
```tsx
92+
import SuperTokens from "supertokens-auth-react";
93+
import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}";
94+
import Session from "supertokens-auth-react/recipe/session";
95+
96+
SuperTokens.init({
97+
appInfo: {
98+
apiDomain: "...",
99+
appName: "...",
100+
websiteDomain: "..."
101+
},
102+
recipeList: [
103+
^{recipeNameCapitalLetters}.init({
104+
signInAndUpFeature: {
105+
signInForm: {
106+
formFields: [{
107+
id: "email",
108+
label: "Your Email",
109+
// highlight-start
110+
getDefaultValue: () => "[email protected]"
111+
// highlight-end
112+
}]
113+
}
114+
}
115+
}),
116+
Session.init()
117+
]
118+
});
119+
```
120+
</TabItem>
121+
</FrontendPreBuiltUITabs>
122+
123+
<img alt="Prebuilt signin form UI with default values for fields" src="/img/^{codeImportRecipeName}/signin-with-default-values.png" />
124+
125+
126+
:::important
127+
128+
The return value of `getDefaultValue` function must be a string
129+
130+
:::
131+
132+
</PreBuiltUIContent>
133+
</PreBuiltOrCustomUISwitcher>
134+
135+
136+
<PreBuiltOrCustomUISwitcher>
137+
<PreBuiltUIContent>
138+
139+
## Changing Optional Error Message
140+
141+
142+
When you try to submit login form without filling in required / non-optional fields, the SDK will, by default, show an error stating that the `Field is not optional`. You can customize this error message with `nonOptionalErrorMsg` property in the formField config.
143+
144+
Let's see how to achieve it.
145+
146+
<FrontendPreBuiltUITabs>
147+
<TabItem value="reactjs">
148+
149+
```tsx
150+
import SuperTokens from "supertokens-auth-react";
151+
import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}";
152+
import Session from "supertokens-auth-react/recipe/session";
153+
154+
SuperTokens.init({
155+
appInfo: {
156+
apiDomain: "...",
157+
appName: "...",
158+
websiteDomain: "..."
159+
},
160+
recipeList: [
161+
^{recipeNameCapitalLetters}.init({
162+
signInAndUpFeature: {
163+
signInForm: {
164+
formFields: [{
165+
id: "email",
166+
label: "Your Email",
167+
placeholder: "Email",
168+
// highlight-start
169+
nonOptionalErrorMsg: "Please add your email"
170+
// highlight-end
171+
}]
172+
}
173+
}
174+
}),
175+
Session.init()
176+
]
177+
});
178+
```
179+
</TabItem>
180+
</FrontendPreBuiltUITabs>
181+
182+
<img alt="Prebuilt form UI with custom error message" src="/img/^{codeImportRecipeName}/signin-with-custom-error-msg.png" />
183+
184+
185+
Observe how the `password` field displays the standard error message because a custom message wasn't assigned using `nonOptionalErrorMsg` for that field.
186+
187+
:::tip
188+
189+
To display an error message for required/non-optional fields, make use of the `nonOptionalErrorMsg` property.
190+
For complex validations of fields, make use of [field validators](/docs/^{docsLinkRecipeName}/common-customizations/signin-form/field-validators).
191+
192+
:::
193+
194+
</PreBuiltUIContent>
195+
</PreBuiltOrCustomUISwitcher>

0 commit comments

Comments
 (0)