Sign Up Forms

Convert visitors into registered users

Use the SignUp component to build sign-up forms and convert your visitors into registered users. Customize your labels, placeholders, define additional texts, and personalize your CTAs.

<SignUp />

<!-- Using SignUp with default props -->
<SignUp
    label="Sign up"
    emailLabel="Email"
    emailPlaceholder="Enter your email"
    emailSubText=""
    passwordLabel="Password"
    passwordPlaceholder="Enter your password"
    passwordSubText="Generate a unique password <a href='#'>here</a>"
    primaryButtonTheme="success"
    primaryButtonLabel="Create an account"
    secondaryButtonTheme="secondary"
    secondaryButtonLabel="Sign in"
    primaryButtonSelector=""
    secondaryButtonSelector=""
/>

By default, calling the SignUp component will create the above form. You can use the above props to translate the form and customize its appearance to create various sign-up forms.

Variants

You can use the above props to create a wide range of sign-up forms, including forms with username, forms with additional links, or forms with a single button. To remove secondary buttons, simply set your secondaryButtonLabel prop to an empty string:

<SignUp
    label="Sign up with username"
    emailLabel="Username"
    emailPlaceholder="Enter your username"
    passwordSubText="No account yet? <a href='#'>Generate a strong password</a>."
    secondaryButtonTheme="flat"
/>

<SignUp
    label="Sign up with one CTA"
    primaryButtonTheme="info"
    primaryButtonLabel="Create account"
    emailPlaceholder=""
    passwordPlaceholder=""
    passwordSubText=""
    secondaryButtonLabel=""
/>

Handling User Input

To handle user input, pass a selector to the primaryButtonSelector and secondaryButtonSelector props, that you can use for attaching event listeners:

<SignUp
    primaryButtonSelector="register"
    secondaryButtonSelector="sign-in"
/>

<script>
    const form = document.querySelector('.sign-up-form')
    const registerButton = document.querySelector('.register')
    const signInButton = document.querySelector('.sign-in')

    // Prevent default form submit event
    form.addEventListener('submit', event => event.preventDefault())

    registerButton.addEventListener('click', () => console.log('clicked on register'))
    signInButton.addEventListener('click', () => console.log('clicked on sign in'))
</script>

<SignUp
    primaryOnClick={event => console.log('clicked on register')}
    secondaryOnClick={event => console.log('clicked on sign in')}
/>

In Svelte & React, you can use the primaryOnClick and secondaryOnClick props to attach event listeners to your primary and secondary buttons.

API

type SignUpProps = {
    label?: string
    emailLabel?: string
    emailPlaceholder?: string
    emailSubText?: string
    passwordLabel?: string
    passwordPlaceholder?: string
    passwordSubText?: string
    primaryButtonTheme?: ButtonProps['theme']
    primaryButtonLabel?: string
    secondaryButtonTheme?: ButtonProps['theme']
    secondaryButtonLabel?: string
}

type SvelteSignUpProps = {
    primaryOnClick?: MouseEventHandler<HTMLButtonElement>
    secondaryOnClick?: MouseEventHandler<HTMLButtonElement>
} & SignUpProps

type ReactSignUpProps = {
    primaryOnClick?: React.MouseEventHandler<HTMLButtonElement>
    secondaryOnClick?: React.MouseEventHandler<HTMLButtonElement>
} & SignUpProps

Prop	Purpose
`label`	Sets a label for the sign-up form.
`emailLabel`	Sets a label for the email input.
`emailPlaceholder`	Sets a placeholder for the email input.
`emailSubText`	Sets additional text under the email input.
`passwordLabel`	Sets a label for the password input.
`passwordPlaceholder`	Sets a placeholder for the password input.
`passwordSubText`	Sets additional text under the password input.
`primaryButtonTheme`	Sets the theme for the primary button.
`primaryButtonLabel`	Sets the label for the primary button.
`secondaryButtonTheme`	Sets the theme for the secondary button.
`secondaryButtonLabel`	Sets the label for the secondary button.

Svelte & React Prop	Purpose
`primaryOnClick`	Attach on-click event listeners for the primary button.
`secondaryOnClick`	Attach on-click event listeners for the secondary button.

<- Hero Tiles ->

Request improvement for this page