---
title: OTP
description: A one-time-code verification screen composed from touchcn components.
---
import Source from './_generated/otp.mdx';

A phone or email verification screen: a back control in the navbar, a headline,
a prop-driven masked target line, a segmented six-digit code field that
auto-submits the moment the last digit is entered, and a resend control gated by
a 60-second countdown. The code and the timer are local screen state; wire the
actual verification and resend calls from the parent.

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

## Installation

```bash
npx touchcn add otp
```

This also adds the components the block composes:

`button` · `input-otp` · `navbar` · `page`

## Usage

<CodeGroup>

```html Angular
<tcn-otp-block target="•••• 1234" (verify)="check($event)" (resend)="resend()" />
```

```tsx React
import { TcnOtpBlock } from '@/components/blocks/otp';

<TcnOtpBlock target="•••• 1234" onVerify={(code) => check(code)} onResend={resend} />
```

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

<template>
  <TcnOtpBlock target="•••• 1234" @verify="(code) => check(code)" @resend="resend" />
</template>
```

</CodeGroup>

`verify` fires with the full code string as soon as every slot is filled.
`target` is the masked destination shown in the body copy. `resend` fires when
the countdown reaches zero and the user taps Resend (the timer restarts).

<Source />