Level: atom.
Purpose and use
Enter a digits-only verification code in separate cells. Code verification, retries and expiry are screen responsibilities; use ordinary Input for a general identifier.
Anatomy and behavior
Length defaults to six and is floored with a minimum of one. Typing a digit advances focus; paste strips nondigits, fills from the active cell and trims overflow. Backspace clears the current populated cell, or the previous cell when empty; Delete clears the current cell. Every edit emits valueChange; a filled code emits complete, including later complete edits. resetKey clears cells; disabled/validating block editing.
Accessibility and content
The group has ariaLabel; each cell is named by its position and uses numeric input mode and one-time-code autocomplete. Warning/error set aria-invalid per cell. autofocus and focusFirstInput target the first empty cell when not blocked. Arrow-key cell traversal is not implemented.
Open Questions
The API has no upper length bound, external code value, server-validation action or validating live announcement. Do not infer these from complete/state.
Local component contract
This is the current owned contract for component.input-code. Behavior above was checked
against the local implementation, template and focused tests listed below.
Historical migration evidence does not override these current sources.
Public type values
WblInputCodeState: default | disabled | validating; WblInputCodeValidation: default | warning | error. length is a number; pass a finite positive integer. resetKey accepts any changed value. valueChange/complete emit strings.
Classes and selectors
WblInputCodeComponent—wbl-input-code(src/app/design-system/primitives/input-code/input-code.component.ts).
Inputs
WblInputCodeComponent.length = input(6)WblInputCodeComponent.state = input<WblInputCodeState>('default')WblInputCodeComponent.validation = input<WblInputCodeValidation>('default')WblInputCodeComponent.autofocus = input(false)WblInputCodeComponent.ariaLabel = input('Код подтверждения')WblInputCodeComponent.resetKey = input<unknown>(null)
Models
- None.
Outputs
WblInputCodeComponent.valueChange = output<string>()WblInputCodeComponent.complete = output<string>()
Slots and projection markers
- The exact template has no Angular content-projection slot.
Local evidence
Behavior/template:
src/app/design-system/primitives/input-code/input-code.component.html(reviewed in D-025, 2026-09-05).Code:
src/app/design-system/primitives/input-code/input-code.component.ts.Focused test:
src/app/design-system/primitives/input-code/input-code.component.spec.ts.Public export:
export * from './primitives/input-code/input-code.component';insrc/app/design-system/index.ts.Storybook:
storybook/stories/input-code.stories.ts(Design System/Primitives/wbl-input-code).
Figma status
This runtime contract does not infer a Figma owner. Assembly evidence, when verified, is maintained separately through the inventory-linked sidecar.
Provenance
The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.