Data input

Field

Themed form field wrapper that auto-wires label, help, error, and required/invalid/disabled state.

Import

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

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

Loading editor

Playground

#playground

We'll never share your email.

orientation

label

help

required

invalid

disabled

<kj-field
  kjFieldOrientation="vertical"
>
  <kj-field-label>Email</kj-field-label>
  <kj-input type="email" placeholder="you@example.com" />
  <kj-field-help>We'll never share your email.</kj-field-help>
</kj-field>