---
title: Sign Up
description: A registration screen composed from touchcn components.
---
import Source from './_generated/signup.mdx';

A purely presentational sign-up screen: name, email and password fields, a
terms checkbox with linked-text styling, a submit button with a loading state,
an "or" divider, Apple and Google social sign-up placeholders and a sign-in
affordance. The submit button stays disabled until the terms are accepted. It
owns only the field values and emits them — wire real account creation from the
parent.

<DemoFrame component="blocks-signup" height={700} />

## Installation

```bash
npx touchcn add signup
```

This also adds the components the block composes:

`button` · `checkbox` · `divider` · `input` · `navbar` · `page` · `spinner`

## Usage

<CodeGroup>

```html Angular
<tcn-signup-block [loading]="loading()" (submitted)="signUp($event)" />
```

```tsx React
import { TcnSignupBlock } from '@/components/blocks/signup';

<TcnSignupBlock loading={loading} onSubmit={(values) => signUp(values)} />
```

```vue Vue
<script setup lang="ts">
import { TcnSignupBlock } from '@/components/blocks/signup';
</script>

<template>
  <TcnSignupBlock :loading="loading" @submit="(values) => signUp(values)" />
</template>
```

</CodeGroup>

The submit callback receives `{ name, email, password, acceptedTerms }`. Set
`loading` to show the button spinner and disable the form while your request is
in flight.

Set `showBack` to render a back control in the navbar's leading slot; it emits
`back` (Angular) / `onBack` (React) when tapped — wire it to your router.

<Source />