Data input

Form

Themed form host with submit interception, focus-on-first-error, async state, and an optional error summary.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjFormComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

fields

with summary

with actions

async submit

<form kj-form
  [formGroup]="form"
  (kjSubmit)="onSubmit()"
>
  <kj-form-summary />
  <kj-field>
    <kj-field-label>Email</kj-field-label>
    <kj-input type="email" formControlName="email" placeholder="you@example.com" />
  </kj-field>
  <kj-field>
    <kj-field-label>Password</kj-field-label>
    <kj-input type="password" formControlName="password" />
  </kj-field>
  <kj-form-actions>
    <kj-button kjVariant="ghost" kjType="reset">Cancel</kj-button>
    <kj-button kjType="submit">Save</kj-button>
  </kj-form-actions>
</form>