Forms

Stable - @kikita-labs/ui v1.6.1

Input

Input keeps the control native and applies Kikita UI styling through the kuiInput directive.

Import

Import the public input primitives from the package entrypoint.

input.ts
import {
  KuiInputDirective,
  KuiInputGroupDirective,
} from '@kikita-labs/ui';

Usage

Open in Playground

Use kuiInput on native input elements. Use Field only when the control needs label, hint, or error chrome.

<div class="basic-input-example">
  <input kuiInput type="email" aria-label="Work email" placeholder="mira@company.dev" />
  <input kuiInput aria-label="Project slug" value="kikita-ui" />
  <input kuiInput invalid aria-label="Invalid project slug" value="Invalid value" />
</div>

Input group

Drop kuiFieldAffix inside kui-field for prefix text, suffix text, icons, or trailing actions. It auto-detects its look from the host element (button, kui-icon, or plain text) and kui-field applies shared .kui-input-group chrome automatically — no wrapper div needed.

https://.dev

Affixes are visual field chrome.

<kui-field label="Project URL" hint="Affixes are visual field chrome." class="input-group-example">
  <span kuiFieldAffix>https://</span>
  <input kuiInput aria-label="Project slug" value="kikita-ui" />
  <span kuiFieldAffix>.dev</span>
</kui-field>

API

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

NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg' — Native input height and spacing size.
invalidboolean — Marks the input invalid outside a field error state.
idstring — Explicit id override. Inside kui-field, the field id is used when omitted.

Accessibility

Keep native input semantics. Add labels through Field or native label elements.

  • Use a visible label through kui-field or a native label.
  • Use invalid only when the input is outside field error wiring.
  • Decorative affix icons use aria-hidden="true".
  • Interactive field actions must be native buttons with accessible names.