Star4
Back to components

Input

zyra-input

Foundation text inputs for login forms, filters, search flows, and structured data entry experiences.

Component preview

Explore the available states and the real library behavior for this component.

zyra-form-field + zyra-input

CVAAngular Forms

Smart wrapper + pure CVA input — Reactive & Template Forms

Controls
type
appearance
size
hint
successHint
features
prefixIcon
suffixIcon
maxLength
Architecture

zyra-form-field — label, hint, icons, counter

zyra-input — pure CVA, no chrome

Use zyra-input standalone inside toolbars, tables etc.

Live Preview outlinemdtext
This is a hint message
valid: false touched: false dirty: false
Generated Code
<zyra-form-field
  label="Email"
  hint="We'll never share it"
  successHint="Valid email"
  appearance="outline"
>
  <zyra-input type="text" formControlName="email" />
</zyra-form-field>

// Component:
readonly appIcons = appIcons;
form = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email])
});
Event Log 0
Interact with the input above to see events
Appearances 3 variants
appearance="outline"
outline style input
appearance="filled"
filled style input
appearance="underline"
underline style input
Real World Forms Reactive Forms
Login
Welcome back
We'll never share your email
At least 8 characters
✗ Has errors
Register
Create your account
Min 2 characters
Min 10 digits
Min 8 chars + uppercase + number + symbol
✗ Has errors
Profile Settings
Update your info
Min 3 chars, no spaces
Must start with https://
Max 160 characters
0 / 160
✓ Form valid
All Validators Blur each to trigger
Validators.required
Leave empty and blur
Validators.email
Try: notanemail
Validators.minLength(6)
Try: abc
Validators.maxLength(10)
Try more than 10 chars
0 / 10
Validators.min(18)
Try: 15
Validators.max(100)
Try: 150
Validators.pattern
6 digits only. Try: abc123
Custom validator
No spaces. Try: hello world
zyra-input Standalone No zyra-form-field needed
Search bar
🔍
Inside a table cell
Row 1
Row 2
Row 3

Copy-paste example

Drop this into your Angular standalone component and it works out of the box.

input.demo.ts
import { Component } from '@angular/core';
import { ZyraInput } from 'zyra-ng-ui';

@Component({
  selector: 'app-demo-input',
  standalone: true,
  imports: [ZyraInput],
  template: `
    <zyra-input
      type="email"
      size="md"
      placeholder="name@company.com"
    />
  `,
})
export class DemoInputComponent {}

Variants

All the visual modes and states available for this component.

default

Standard text/email/password field

with prefix icon

Icon inside the leading edge of the field

with clear button

Shows x button to clear the value

disabled

Non-interactive state with muted styling

error

Red border and error icon for invalid state

API

All inputs and configuration options for zyra-input.

PropTypeDefaultDescription
type'text' | 'email' | 'password' | 'search' | 'url' | 'number''text'Native input type
size'sm' | 'md' | 'lg''md'Height and font scale
placeholderstring-Placeholder text shown when empty
disabledbooleanfalseDisables the input
valuestring-Two-way bound value via ngModel

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

Related components

Components that pair well with Input in real UI patterns.

Form FieldForms→ToggleForms→ButtonActions→