# Input Code

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';` in `src/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.