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 |
search (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 |
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