Field

<kui-field label="Project" hint="Minimum 3 characters">
  <input kuiInput [formField]="profileForm.project" />
</kui-field>

<!-- hideErrors keeps the invalid state but hides the rendered messages -->
<kui-field label="Project" hint="Minimum 3 characters" hideErrors>
  <input kuiInput [formField]="profileForm.project" />
</kui-field>

• With a required(...) validator on the bound field the required marker is inferred; an explicit required input on kui-field overrides it.
• The first error message of the bound field is rendered automatically unless hideErrors is set. hideErrors hides every rendered message, including the explicit error input and projected kuiError content, but keeps the invalid state.

<div class="field-projected-example">
  <kui-field label="Email">
    <input kuiInput type="email" placeholder="mira@company.dev" />
    <p kuiHint>Use your work email</p>
    <p kuiError>Email is required</p>
  </kui-field>

  <kui-field label="API key">
    <input kuiInput />
    <p kuiHint class="kui-field-message">
      <span>Stored encrypted. <a href="#encryption">Learn more</a>.</span>
    </p>
  </kui-field>
</div>

The same markers also exist for the label, which the field wires to the control for you:

<kui-field>
  <label kuiLabel>Email</label>
  <input kuiInput type="email" [formField]="profileForm.email" />
  <p kuiHint>Use your work email</p>

  @if (shouldShowEmailError()) {
    <p kuiError>Email is required</p>
  }
</kui-field>

• kuiError is manual content: render it with @if under your own visibility rules, and never hide it with [hidden], so it only joins the field semantics when it is shown.
• Add .kui-field-message to a projected hint or error for icon and text layouts; projected errors stay part of aria-describedby.

<div class="field-affix-example">
  <kui-field label="Project URL" hint="The prefix and suffix are visual field chrome.">
    <span kuiFieldAffix>https://</span>
    <input kuiInput aria-label="Project slug" />
    <span kuiFieldAffix>.dev</span>
  </kui-field>

  <kui-field label="Search">
    <kui-icon kuiFieldAffix name="search" />
    <input kuiInput aria-label="Search query" />
    <button kuiFieldAffix type="button" aria-label="Clear search">
      <kui-icon name="x" />
    </button>
  </kui-field>
</div>

• One directive, three looks, detected from the host: any button gets compact action styling (do not add kuiButton or kuiIconButton to it), kui-icon a fixed square icon slot, anything else muted text (the emphasis input switches it to full color).
• A span kuiLoader kuiFieldAffix is detected as an icon and keeps its own role="status" and label. kuiFieldAffixIcon and kuiFieldAction remain as explicit overrides for older markup.
• Decorative icons use aria-hidden="true"; interactive field actions must be native buttons with accessible names.

<div class="field-input-group-example">
  <kui-field label="API key">
    <div class="kui-input-group">
      <input kuiInput />
      <span class="kui-affix-spinner" role="status" aria-label="Checking key"></span>
    </div>
  </kui-field>
</div>

Interactive descendants such as clear buttons, chevrons, visibility toggles, links and the control itself keep their own behavior.

• 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.
• The required marker is visual only (aria-hidden). The merged required state, from the explicit required input or a Signal Forms required(...) validator, reaches assistive technology as aria-required="true" on the control. kui-field never writes the native required attribute, so nothing is announced twice.
• Controls with a role that supports it receive aria-required: Input, Textarea, Checkbox, Switch, Number Input, Color Input, Select, Combobox, Date Picker and Time Picker. A single Radio does not (the requirement belongs to the group you build), Slider does not, kui-otp-input marks only its first cell, and kui-segmented exposes no required state.

• The classes are KuiField, KuiInput, KuiInputGroup, KuiFieldAffix, KuiFieldAffixIcon and KuiFieldAction (they had a Component or Directive suffix); ng update @kikita-labs/ui renames the imports.
• KUI_FIELD_OPTIONS is removed and kuiProvideFieldOptions is deprecated until 3.0: set defaults.field through provideKuiDefaults or provideKikitaUi({ defaults }). A nested provider now merges with its parent per property.
• kui-field exposes its required state as aria-required on the controls that support it, so snapshot tests of the rendered markup change.
• Field styles moved into the kui.components layer without ::ng-deep: the field needs kikita-ui.css like every other component, and an unlayered application rule overrides it without raising specificity.