# Input

Level: atom.

## Purpose and use

Enter a single-line value. Use Input Number for non-negative integer stepping, Textarea for multiple lines and Input Code for separate verification-code cells.

## Anatomy and behavior

The field has optional label, side icons, suffix, clear action and description. `value` seeds/synchronizes local text and valueChange emits edits. `digitsOnly` removes non-digits; maxLength truncates. Clear emits an empty string and returns focus. Escape blurs. Labels float in L/M when active or filled; suffix normally shows only when filled and inactive. `readonlyGuard` temporarily keeps the field readonly until its focus callback releases it.

## Accessibility and content

ariaLabel overrides labelText; the description ID joins any external ariaDescribedBy. Warning and error both set aria-invalid. Disabled uses the native disabled state. Keep clearAriaLabel meaningful. `required` only renders a decorative star; it does not enforce required validation or set aria-required.

## Open Questions

Required semantics and form validation must be specified by the receiving form. Digits-only mode is not decimal parsing or arbitrary-precision numeric validation.

## Local component contract

This is the current owned contract for `component.input`. 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

`WblInputSize`: `L | M | S`; `WblInputState`: `default | active | disabled`; `WblInputValidation`: `default | warning | error`; `WblInputSuffixType`: `rub | squareMeter | cubicMeter | liters | km | pieces`. Suffixes render ₽, м², м³, л, км, шт; suffixLabel overrides the displayed string. maxLength/clearTabIndex are number|null; aria labels/descriptions and suffixLabel are string|null.

### Classes and selectors

- `WblInputComponent` — `wbl-input` (src/app/design-system/primitives/input/input.component.ts).

### Inputs

- `WblInputComponent.size = input<WblInputSize>('L')`
- `WblInputComponent.state = input<WblInputState>('default')`
- `WblInputComponent.validation = input<WblInputValidation>('default')`
- `WblInputComponent.ariaLabel = input<string | null>(null)`
- `WblInputComponent.ariaDescribedBy = input<string | null>(null)`
- `WblInputComponent.showLabel = input(true)`
- `WblInputComponent.labelText = input('Label')`
- `WblInputComponent.required = input(false)`
- `WblInputComponent.showPlaceholder = input(true)`
- `WblInputComponent.placeholderText = input('Placeholder')`
- `WblInputComponent.value = input('')`
- `WblInputComponent.readonlyGuard = input(true)`
- `WblInputComponent.digitsOnly = input(false)`
- `WblInputComponent.maxLength = input<number | null>(null)`
- `WblInputComponent.showSuffix = input(false)`
- `WblInputComponent.suffixType = input<WblInputSuffixType>('rub')`
- `WblInputComponent.suffixLabel = input<string | null>(null)`
- `WblInputComponent.showSuffixWhenActive = input(false)`
- `WblInputComponent.constrainedSuffix = input(false)`
- `WblInputComponent.leftContent = input(false)`
- `WblInputComponent.leftIcon = input(false)`
- `WblInputComponent.leftIconName = input<WblIconName>('spark')`
- `WblInputComponent.rightContent = input(false)`
- `WblInputComponent.rightIcon = input(false)`
- `WblInputComponent.rightIconName = input<WblIconName>('spark')`
- `WblInputComponent.clear = input(false)`
- `WblInputComponent.clearAriaLabel = input('Clear input')`
- `WblInputComponent.clearTabIndex = input<number | null>(null)`
- `WblInputComponent.chevron = input(false)`
- `WblInputComponent.showDescription = input(false)`
- `WblInputComponent.descriptionText = input('Description')`

### Models

- None.

### Outputs

- `WblInputComponent.valueChange = 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/input.component.html` (reviewed in D-025, 2026-09-05).

- Code: `src/app/design-system/primitives/input/input.component.ts`.
- Focused test: `src/app/design-system/primitives/input/input.component.spec.ts`.
- Public export: `export * from './primitives/input/input.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/input.stories.ts` (`Design System/Primitives/wbl-input`).

## 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.