Input
Foundation text inputs for login forms, filters, search flows, and structured data entry experiences.
API
All inputs and configuration options for zyra-input.
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'text' | 'email' | 'password' | 'search' | 'url' | 'number' | 'text' | Native input type |
size | 'sm' | 'md' | 'lg' | 'md' | Height and font scale |
placeholder | string | '' | Placeholder text shown when empty |
readonly | boolean | false | Makes the field non-editable but still focusable |
disabled | boolean (Angular Forms) | false | Disabled state via CVA — use formControl.disable() or [disabled]="true" on template-driven ngModel |
id | string | '' | Override the auto-generated id on the native input |
maxlength | number | null | null | Native maxlength constraint |
min | number | null | null | Minimum value (number inputs) |
max | number | null | null | Maximum value (number inputs) |
debounce | number | 0 | Milliseconds to wait after the last keystroke before emitting `search`. 0 disables debouncing |
valueChange (output) | string | - | Emits the current string value on every keystroke |
searched (output) | string | - | Emits the value once `debounce` ms have elapsed since the last keystroke (only when debounce > 0) |
focused (output) | void | - | Emits when the input gains focus |
blurred (output) | void | - | Emits when the input loses focus |
Tokens
CSS custom properties zyra-input reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Text--zyra-color-input-text | var(--zyra-color-foreground) | Color of the typed value, including autofilled text. |
Placeholder--zyra-color-input-placeholder | var(--zyra-color-foreground-subtle) | Color of the placeholder text shown when empty. |
OTP box background--zyra-color-field-bg | var(--zyra-color-input-bg) | Fill color of each OTP box. Shared with ZyraFormField — see its Tokens section. |
OTP box border--zyra-color-field-border | var(--zyra-color-input-border) | Border color of each OTP box in its resting state. |
OTP box focus border--zyra-color-field-focus-border | var(--zyra-color-primary) | Border color of an OTP box on focus, or once filled. |
OTP box focus shadow--zyra-field-focus-shadow | var(--zyra-input-shadow-focus) | Ring shadow shown on a focused OTP box. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Always associate an input with a visible <label> or use aria-label
- Pair with ZyraFormField to get proper label and hint associations automatically
- Error state sets aria-invalid="true"; pair with an error message element using aria-describedby
- type="search" fields clear on Escape, matching native browser search inputs