Explore the available states and the real library behavior for this component.
Smart wrapper + pure CVA input — Reactive & Template Forms
zyra-form-field — label, hint, icons, counter
zyra-input — pure CVA, no chrome
Use zyra-input standalone inside toolbars, tables etc.
<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])
});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 {}