Skip to main content

Customize form fields

Customize form fields in the sign in component by modifying labels, placeholders, default values, and error messages.

Before you start

The following instructions are only relevant if you are using the pre-built UI components. If you have created your own authentication UI, you can skip this guide.

Modify labels and placeholders

To change the labels and placeholders of the fields update the formFields property, in the recipe configuration.

import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
EmailPassword.init({
signInAndUpFeature: {
signInForm: {
formFields: [{
id: "email",
label: "customFieldName",
placeholder: "Custom value"
}]
}
}
}),
Session.init()
]
});

Set default values

Add a getDefaultValue option in the formFields configuration to pre-fill the inputs. Keep in mind that the function needs to return a string.

import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
EmailPassword.init({
signInAndUpFeature: {
signInForm: {
formFields: [{
id: "email",
label: "Your Email",
getDefaultValue: () => "john.doe@gmail.com"
}]
}
}
}),
Session.init()
]
});

Change the optional error message

When you try to submit the login form without filling in the required fields, the UI, by default, shows an error stating that the Field is not optional. To customize this message set the nonOptionalErrorMsg property to a custom string.

import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
EmailPassword.init({
signInAndUpFeature: {
signInForm: {
formFields: [{
id: "email",
label: "Your Email",
placeholder: "Email",
nonOptionalErrorMsg: "Please add your email"
}]
}
}
}),
Session.init()
]
});

Custom field validators

To add custom validation logic to the sign in form, update the sign up form configuration. The email and password fields validation synchronizes between the two forms.

Check the sign up form instructions for more details.

See also