Forms

Stable - @kikita-labs/ui v1.6.1

Field

Field wraps native controls with label, hint, error, required state, and ARIA wiring.

Import

Import the public field primitive from the package entrypoint.

field.ts
import { KuiFieldComponent } from '@kikita-labs/ui';

Usage

Open in Playground

Use kui-field whenever a visible label, hint, error, or required marker is needed.

Use your work email

<div class="basic-field-example">
  <kui-field label="Email" hint="Use your work email">
    <input kuiInput type="email" placeholder="mira@company.dev" />
  </kui-field>

  <kui-field label="Project" error="Project name is required" required>
    <input kuiInput value="" />
  </kui-field>
</div>

API

Inputs verified against @kikita-labs/ui v1.6.1 public typings.

NameTypeDefaultDescription
labelstring — Visible label shorthand. Prefer this for simple field labels.
hintstring — Optional help text rendered below the control and wired through aria-describedby.
errorstring — Explicit error text rendered below the control and wired through aria-describedby.
hideErrorsboolean — Hides automatic, explicit, and projected error messages while keeping invalid state.
requiredboolean — Explicit required marker override. Omit when Signal Forms can infer it.
size'xs' | 'sm' | 'md' | 'lg' — Field spacing and projected control size.

Accessibility

Keep field semantics native-first. Let kui-field wire ids and descriptions instead of duplicating ARIA by hand.

  • Prefer a visible label through label or projected kuiLabel.
  • Projected kuiHint and kuiError participate in aria-describedby.
  • The field does not replace the native control role.