Form Field

zyra-form-field

Controls

type

appearance

size

prefixIcon

suffixIcon

hint

successHint

maxLength

features

clearButtonloading

Architecture

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

zyra-input — pure CVA, no chrome

Use zyra-input standalone inside toolbars, tables etc.

Live Preview outline

text

Label

This is a hint message

valid: false

touched: false

dirty: false

<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])
});

Interact with the input above to see events

Appearances 3 variants

appearance="outline"

outline

outline style input

appearance="filled"

filled

filled style input

appearance="underline"

underline

underline style input

Real World Forms Reactive Forms

Welcome back

Create your account

Profile Settings

Update your info

All Validators Blur each to trigger

Validators.required

Required

Leave empty and blur

Validators.email

Try: notanemail

Validators.minLength(6)

Min 6 chars

Try: abc

Validators.maxLength(10)

Max 10 chars

Try more than 10 chars

0 / 10

Validators.min(18)

Age (min 18)

Try: 15

Validators.max(100)

Score (max 100)

Try: 150

Validators.pattern

Pincode

6 digits only. Try: abc123

Custom validator

Username

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

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 {}

Helps compose accessible formsSupports helper and error textKeeps spacing consistent

Form Field

Component preview

zyra-form-field + zyra-input