Form Field
Field wrappers that align labels, hints, and validation copy into a more polished form system.
Component preview
Explore the available states and the real library behavior for this component.
zyra-form-field + zyra-input
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])
});Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component } from '@angular/core';
import { ZyraFormField, ZyraInput } from 'zyra-ng-ui';
@Component({
selector: 'app-demo-form-field',
standalone: true,
imports: [ZyraFormField, ZyraInput],
template: `
<zyra-form-field
label="Email"
hint="We'll only use this for account updates."
>
<zyra-input
type="email"
placeholder="name@company.com"
/>
</zyra-form-field>
`,
})
export class DemoFormFieldComponent {}
Variants
All the visual modes and states available for this component.
with labelVisible label above the field
with hintHelper text below the field
with errorError message replacing the hint on invalid state
with prefix iconIcon decorating the start of the wrapped input
API
All inputs and configuration options for zyra-form-field.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Visible label text linked to the child input |
hint | string | - | Helper text shown below the input |
error | string | - | Error text; replaces hint when set |
size | 'sm' | 'md' | 'lg' | 'md' | Passes size down to child input |
prefixIcon | IconDefinition | - | Icon shown inside the field leading edge |
clearButton | boolean | false | Shows a clear x button in the field |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- label is automatically linked to the child input via htmlFor/id pairing
- hint and error text are linked via aria-describedby on the input
- When error is set, the child input receives aria-invalid="true"