Forms

Stable - @kikita-labs/ui v1.6.1

Color Input

A native text input for theme seed colors with Kikita picker affordances.

Import

Use the directive on a native input, usually inside a Kikita field.

color-input.ts
import { KuiColorInputDirective, KuiFieldComponent } from '@kikita-labs/ui';

Usage

Open in Playground

Keep the native input as the form source of truth and let the swatch open the picker.

Hex and OKLCH values are supported.

<div class="basic-color-input-example">
  <kui-field label="Primary seed" hint="Hex and OKLCH values are supported.">
    <input
      kuiColorInput
      value="#5b4fe0"
      autocomplete="off"
      swatchLabel="Open primary seed color picker"
    />
  </kui-field>
</div>

API

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

NameTypeDefaultDescription
kuiColorInputdirective-Applies Kikita color-input styling and picker affordances to a native input.
size'xs' | 'sm' | 'md' | 'lg''md'Control height matched to Kikita UI size tokens.
invalidbooleanfalseApplies an error border and inherits invalid state from parent kui-field.
idstring | undefinedfield idNative input id override.
swatchLabelstring'Open color picker'Accessible label for the swatch button.

Accessibility

The editable value remains a native text input, while picker triggers are native buttons.

  • Use kui-field for label, hint, error, and described-by wiring.
  • Unsupported non-empty values expose invalid state on the wrapper.
  • Disabled and readonly native attributes also disable the swatch button.
  • Test the picker popover manually on narrow screens before releasing visual changes.