# TOTP
Use `ui-totp` for two-factor authentication, device verification, SMS codes, and short PIN-style confirmation flows. It inherits the shared field API for labels, help text, size, variant, readonly, disabled, and validation messaging while adding grouped digit inputs and verification-specific interaction behavior.
## Import
```ts
import { TotpComponent } from 'ui';
```
## Basic verification input
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TotpComponent } from 'ui';
@Component({
selector: 'app-totp-basic-demo',
standalone: true,
imports: [FormsModule, TotpComponent],
template: `
Authenticator app code
Good default for standard 6-digit verification.
Pre-filled example
Shows how pasted or restored values distribute across the inputs.
`,
})
export class TotpBasicDemoComponent {
protected code = '123456';
}
```
## Digit count and scale
```ts
import { Component } from '@angular/core';
import { TotpComponent } from 'ui';
@Component({
selector: 'app-totp-digits-demo',
standalone: true,
imports: [TotpComponent],
template: `
`,
})
export class TotpDigitsDemoComponent {}
```
## Appearance and size
```ts
import { Component } from '@angular/core';
import { TotpComponent } from 'ui';
@Component({
selector: 'app-totp-appearance-demo',
standalone: true,
imports: [TotpComponent],
template: `
Filled verification surface
Alternative visual treatments
`,
})
export class TotpAppearanceDemoComponent {}
```
## Readonly, disabled, and error states
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TotpComponent } from 'ui';
@Component({
selector: 'app-totp-states-demo',
standalone: true,
imports: [FormsModule, TotpComponent],
template: `
`,
})
export class TotpStatesDemoComponent {
protected readonlyCode = '654321';
protected invalidCode = '123';
protected get invalidError(): string {
if (!this.invalidCode) {
return '';
}
return this.invalidCode.length === 6 ? 'Invalid verification code.' : '';
}
}
```
## Validation with reactive forms
```ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ButtonComponent, TotpComponent } from 'ui';
@Component({
selector: 'app-totp-validation-demo',
standalone: true,
imports: [ButtonComponent, ReactiveFormsModule, TotpComponent],
template: `
`,
})
export class TotpValidationDemoComponent {
protected readonly verifyForm = new FormGroup({
code: new FormControl('', {
nonNullable: true,
validators: [Validators.required, Validators.minLength(6), Validators.maxLength(6)],
}),
});
protected get codeError(): string {
const control = this.verifyForm.controls.code;
if (!control.touched && !control.dirty) {
return '';
}
if (control.hasError('required')) {
return 'Verification code is required.';
}
if (control.hasError('minlength') || control.hasError('maxlength')) {
return 'Enter all 6 digits.';
}
return '';
}
protected markTouched(): void {
this.verifyForm.markAllAsTouched();
}
protected fillExample(): void {
this.verifyForm.controls.code.setValue('482915');
this.verifyForm.controls.code.markAsTouched();
}
}
```
## Verification panel composition
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent, TotpComponent } from 'ui';
@Component({
selector: 'app-totp-verification-panel-demo',
standalone: true,
imports: [ButtonComponent, FormsModule, TotpComponent],
template: `
Two-factor verification
A realistic verification surface combines the code input, context about where the code
came from, and nearby next-step actions.
Verify code
Clear
Use recovery code
`,
})
export class TotpVerificationPanelDemoComponent {
protected code = '';
protected get panelError(): string {
if (!this.code) {
return '';
}
return this.code.length === 6 ? '' : 'Enter all 6 digits before continuing.';
}
}
```
## Accessibility
### Grouped input semantics
`ui-totp` exposes the digit inputs inside a container with `role="group"`. The component uses either the visible label or a fallback group label so assistive technologies announce the code entry context once and then each digit position individually.
### Keyboard and paste behavior
| Key / action | Behavior |
| --- | --- |
| Typing a digit | Fills the current input and moves focus to the next digit. |
| Backspace | Clears the current digit or moves back and clears the previous one when current is empty. |
| Arrow Left / Right | Moves between digits according to text direction. |
| Paste | Splits pasted numeric content across the remaining digit inputs. |
| Home / End | Not used; standard field navigation is digit-to-digit instead. |
### Labels and descriptions
Each digit input gets its own accessible label such as `Digit 1 of 6`, while help and error text are linked through `aria-describedby`. This keeps the grouped code understandable without forcing the user to infer position from visual layout alone.