---
title: Customize the Sign In form
description: Customize form fields in the sign in component by modifying labels, placeholders, default values, and error messages.
sidebar:
  order: 20
---

## 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.

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
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(),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="This example omits surrounding application and SuperTokens configuration."
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIEmailPassword.init({
      signInAndUpFeature: {
        signInForm: {
          formFields: [
            {
              id: "email",
              label: "customFieldName",
              placeholder: "Custom value",
            },
          ],
        },
      },
    }),
    supertokensUISession.init(),
  ],
});
```
</Tab>
</CodeGroup>

---

## 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.

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
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(),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="This example omits surrounding application and SuperTokens configuration."
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIEmailPassword.init({
      signInAndUpFeature: {
        signInForm: {
          formFields: [
            {
              id: "email",
              label: "Your Email",
              getDefaultValue: () => "john.doe@gmail.com",
            },
          ],
        },
      },
    }),
    supertokensUISession.init(),
  ],
});
```
</Tab>
</CodeGroup>

---

## 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.

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
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(),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="This example omits surrounding application and SuperTokens configuration."
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIEmailPassword.init({
      signInAndUpFeature: {
        signInForm: {
          formFields: [
            {
              id: "email",
              label: "Your Email",
              placeholder: "Email",
              nonOptionalErrorMsg: "Please add your email",
            },
          ],
        },
      },
    }),
    supertokensUISession.init(),
  ],
});
```
</Tab>
</CodeGroup>

---

##  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](/authentication/email-password/customize-the-sign-up-form#change-the-default-email-and-password-validators) for more details.

---

## See also


<CardGroup cols={3}>
  <Card title="Custom Validators" href="/authentication/email-password/customize-the-sign-up-form#change-the-default-email-and-password-validators" />
  <Card title="Password Hashing" href="/authentication/email-password/password-hashing" />
  <Card title="Hooks and overrides" href="/authentication/email-password/hooks-and-overrides" />
  <Card title="Username login" href="/authentication/email-password/implement-username-login" />
  <Card title="Password reset" href="/authentication/email-password/password-reset" />
</CardGroup>