---
title: Login
description: A sign-in screen composed from touchcn components.
---
import Source from './_generated/login.mdx';

A purely presentational sign-in screen: an email and password field, a
remember-me checkbox, a submit button with a loading state, a forgot-password
action, an "or" divider, Apple and Google social sign-in placeholders and a
sign-up affordance. It owns only the field values and emits them — wire real
authentication from the parent.

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

## Installation

```bash
npx touchcn add login
```

This also adds the components the block composes:

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

## Usage

<CodeGroup>

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

```tsx React
import { TcnLoginBlock } from '@/components/blocks/login';

<TcnLoginBlock loading={loading} onSubmit={(values) => signIn(values)} />
```

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

<template>
  <TcnLoginBlock :loading="loading" @submit="(values) => signIn(values)" />
</template>
```

</CodeGroup>

The submit callback receives `{ email, password, remember }`. 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 />