length defines the number of cells and type chooses numeric or alphanumeric characters. The model remains one string. Pasting distributes characters across cells. completed reports a complete entry; verification against a server belongs to your application.
Change the controls and try the live preview. Expand the application value or event to inspect its real data; the generated template stays with the configurator.
These values match the current preview. Complete handlers, Core imports and templates are in Source.
configured-state.ts
import { signal } from '@angular/core';
export const text = signal("");
These inputs require a model or function, not a checkbox. Edit the same-named field in the Source component and bind it in the template; data already used by this preview appears in the state above.
Bind FormField once to the component; the field owns value and validation. The schema requires six characters; completed is an event, not a validator. Leave the control to mark it touched, then reset the field to clear both value and interaction state.
Use [(value)] or [value] with (valueChange), not both. The model synchronizes application state; other Outputs communicate their documented events. touch reports leaving/visiting the control, not a new value.
Set ariaLabel to name the whole verification code. Each cell has its own position label; the application locale controls its language. Pasting fills successive cells, ArrowLeft/ArrowRight changes focus and Home/End moves to an endpoint. Show verification feedback separately from the completed event.
Inputs, models and Outputs come from the pinned Core contract. Click named types to open their definitions. This component has no public template slots.
Inputs
Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.
Name
Type
Default
Template binding
Description
ariaLabel
string
'One-time code'
[ariaLabel]
Accessible name when no visible label is available.
dirty
boolean
false
[dirty]
Form state indicating that the user has changed the value.
disabled
boolean
false
[disabled]
Prevents user interaction.
errors
readonly ValidationError.WithOptionalFieldTree[]
[]
[errors]
Validation errors supplied by the form or the application.
Stable identifier of the native control; automatically generated when omitted.
invalid
boolean
false
[invalid]
Displays the invalid state; it does not add a validation rule.
length
number
6
[length]
Number of OTP character cells.
maxLength
number | undefined
undefined
[maxLength]
Form-supplied maximum string length. Configure the validator in your form schema.
minLength
number | undefined
undefined
[minLength]
Form-supplied minimum string length. Configure the validator in your form schema.
name
string
''
[name]
Name associated with the native form control.
pending
boolean
false
[pending]
Form state indicating that asynchronous validation is pending.
readonly
boolean
false
[readonly]
Keeps the control focusable and readable without accepting edits.
required
boolean
false
[required]
Marks the field as required; use a form validator to enforce it.
touched
boolean
false
[touched]
Form state indicating that the control has been visited.
type
"numeric" | "alphanumeric"
'numeric'
[type]
numeric allows digits; alphanumeric also allows letters.
Models
A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.
Name
Type
Default
Template binding
Description
value
string
''
[(value)]
Single committed string, synchronized through valueChange.
Outputs
Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.
Name
Payload
Template binding
Description
completed
string
(completed)="onCompleted($event)"
Emits the normalized full code after all cells are filled; does not authenticate it.
touch
void
(touch)="onTouch($event)"
Notifies the form that the control has been touched; not a value change.
Templates
ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.
This component does not expose content projection or public customization templates.
Load Core styles once. Use the public tokens below for local customization or a preset for application-wide changes. Keep labels, focus, selected options and disabled states readable in both light and dark themes.
Specific tokens
This component uses shared theme tokens rather than dedicated component hooks.
Shared tokens used
Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.
Token
Purpose here
Other impact
Default / fallback
--neu-focus-ring-alpha
Opacity of the semantic focus ring
Shared by other Core consumers; scope the override.
25%
--neu-primary
Brand color for active controls and emphasis
Shared by other Core consumers; scope the override.
#007aff
--neu-radius
Control corner radius
Shared by other Core consumers; scope the override.
8px
--neu-border-color
Inherited theme value used by this component
Shared by other Core consumers; scope the override.
var(--neu-border)
--neu-otp-cell-bg
Inherited theme value used by this component
Shared by other Core consumers; scope the override.
var(--neu-surface-1)
--neu-otp-cell-border
Inherited theme value used by this component
Shared by other Core consumers; scope the override.
var(--neu-border)
--neu-otp-cell-radius
Corner radius
Shared by other Core consumers; scope the override.
var(--neu-radius)
--neu-otp-cell-size
Inherited theme value used by this component
Shared by other Core consumers; scope the override.
