Color Input
A native text input for theme seed colors with Kikita picker affordances.
Use the directive on a native input, usually inside a Kikita field.
import { KuiColorInput, KuiField } from '@kikita-labs/ui';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>Set defaults.colorInput once for the application or for a subtree. Each option resolves as local input > defaults.colorInput.<option> > built-in default.
import { provideKikitaUi } from '@kikita-labs/ui';
export const appConfig: ApplicationConfig = {
providers: [
provideKikitaUi({
defaults: {
colorInput: {
/* options below */
},
},
}),
],
};| Name | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | — | Component size. Takes precedence over the global defaults.size. |
| chevronIcon | KuiIconGlyph | — | Icon of the options toggle. Takes precedence over defaults.icons.pickerChevron. See Structural Icons. |
Set any of these on the component or an ancestor to restyle one part. Each token is optional: when it is not set, the part uses the role or scale token in the default column.
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-color-input-trigger-color-expanded | CSS custom property | --kui-color-primary-fill | Trigger color, expanded |
| --kui-color-input-popover-color | CSS custom property | --kui-color-text | Popover color |
| --kui-color-input-picker-focus-ring-color | CSS custom property | --kui-color-focus | Picker focus ring color |
| --kui-color-input-hue-thumb-bg | CSS custom property | --kui-color-on-scrim | Hue thumb background |
| --kui-color-input-hue-thumb-ring-color | CSS custom property | --kui-color-surface | Hue thumb ring color |
| --kui-color-input-thumb-shadow | CSS custom property | ring and 1px 3px black 45% | Color field thumb shadow |
| --kui-color-input-hue-thumb-shadow | CSS custom property | 1px 3px black 45% and ring | Hue thumb shadow |
| --kui-color-input-num-label-color | CSS custom property | --kui-color-text-secondary | Num label color |
| --kui-color-input-field-color | CSS custom property | --kui-color-text | Field color |
| --kui-color-input-field-border-focus | CSS custom property | --kui-color-primary-fill | Field border color, focus |
| --kui-color-input-field-focus-ring-color | CSS custom property | --kui-color-focus | Field focus ring color |
| --kui-color-input-preset-border | CSS custom property | --kui-color-border | Preset border color |
| --kui-color-input-preset-focus-ring-color | CSS custom property | --kui-color-focus | Preset focus ring color |
| --kui-color-input-hue-focus-ring-color | CSS custom property | --kui-color-focus | Hue thumb focus ring color |
| --kui-color-input-checker-bg | CSS custom property | --kui-color-surface | Checker background |
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-color-input-popover-padding | CSS custom property | --kui-space-3 | Popover padding |
| --kui-color-input-thumb-radius | CSS custom property | --kui-radius-full | Thumb corner radius |
| --kui-color-input-hue-track-radius | CSS custom property | --kui-radius-full | Hue track corner radius |
| --kui-color-input-hue-thumb-radius | CSS custom property | --kui-radius-full | Hue thumb corner radius |
| --kui-color-input-nums-gap | CSS custom property | --kui-space-2 | Nums gap |
| --kui-color-input-num-label-font-size | CSS custom property | --kui-text-xs-size | Num label font size |
| --kui-color-input-field-font-size | CSS custom property | --kui-text-xs-size | Field font size |
| --kui-color-input-field-radius | CSS custom property | --kui-radius-sm | Field corner radius |
| --kui-color-input-preview-row-gap | CSS custom property | --kui-space-3 | Preview row gap |
| --kui-color-input-swatch-radius-lg | CSS custom property | --kui-radius-md | Swatch corner radius, lg |
| --kui-color-input-presets-gap | CSS custom property | --kui-space-2 | Presets gap |
| --kui-color-input-preset-radius | CSS custom property | --kui-radius-sm | Preset corner radius |
Every text the component owns (accessible names, visible words, announcements) is a typed message with an English default. Override it for the application with provideKikitaUi({ messages }), or for a subtree with provideKuiMessages.
| Name | Type | Default | Description |
|---|---|---|---|
| openPicker | string | — | Name of the button that opens the picker. Default Open color picker. |
| pickerLabel | string | — | Name of the lightness and chroma plane. Default Lightness and chroma. |
| hue | string | — | Name of the hue slider. Default Hue. |
| preset | KuiMessageFn<{ name: string; value: string; }> | — | Name of a theme seed preset. Default {name} seed: {value}. |
| presetPrimary | string | — | Preset name of the primary seed. Default Primary. |
| presetNeutral | string | — | Preset name of the neutral seed. Default Neutral. |
| presetSuccess | string | — | Preset name of the success seed. Default Success. |
| presetWarning | string | — | Preset name of the warning seed. Default Warning. |
| presetDanger | string | — | Preset name of the danger seed. Default Danger. |
| presetInfo | string | — | Preset name of the info seed. Default Info. |
| copyValue | string | — | Copy button text and tooltip. Default Copy value. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| kuiColorInput | directive | - | 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. Falls back to defaults.colorInput.size, then the parent field, then the global defaults.size. |
| invalid | boolean | false | Applies an error border and inherits invalid state from parent kui-field. |
| id | string | undefined | field id | Native input id override. |
| swatchLabel | string | undefined | colorInput.openPicker message | Accessible label for the swatch button. Undefined when omitted: the rendered text comes from the colorInput.openPicker message (Open color picker). |
| messages | Partial<KuiColorInputMessages> | undefined | undefined | Per-instance text overrides (openPicker, pickerLabel, and the other picker labels). They win over scoped and root messages. |
| KuiColorInputOptions | interface | - | Shape of defaults.colorInput: size and chevronIcon (takes precedence over defaults.icons.pickerChevron). |
The editable value remains a native text input, while picker triggers are native buttons.
- Use
kui-fieldfor 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.
- A click anywhere on the field outside the swatch and chevron, including the padding around the text, focuses the text input and opens the picker; it never closes it, so the caret can be placed while typing.
- A pointer user keeps the caret in the text field. A keyboard user is moved into the panel, because it renders in an overlay that Tab from the field never reaches; Escape or choosing a value returns focus to the trigger that opened it. The hue slider shows its focus on the thumb.
- During server rendering the directive leaves the native input in place and adds the picker controls in the browser after the view is created, so Angular can hydrate the server markup.
- Test the picker popover manually on narrow screens before releasing visual changes.
Consumer-visible changes of @kikita-labs/ui 2.0 for Color Input.
- The class is
KuiColorInput(it wasKuiColorInputDirective);ng update @kikita-labs/uirenames the import. - The size falls back to
defaults.colorInput.size, the chevron todefaults.colorInput.chevronIcon.swatchLabelis undefined when omitted and the text comes from thecolorInput.openPickermessage. - The picker is reachable from the keyboard (focus moves into the panel and returns on Escape), a click on the field padding focuses the input, and the swatch no longer shows slivers of its checker background.