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.