From 5ad11269d2a3e5a9a76daac9673804efc6f3d4c8 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Sat, 10 Oct 2026 01:18:56 +0200
Subject: [PATCH] feat(ChipInput): add Chip Input form control

c-chip-input: chips from [(value)], typed or pasted text split on the
separator, Enter and blur (createOnBlur) create chips, maxChips, trim and
dedup, chipClassName, selectable/filter with [(selected)], removable,
disabled, readonly (blocks adding, removing and toggling), sizes. Works
with formControlName, ngModel and [formField] without a value accessor;
invalid shows once the control is touched, validationState wins,
aria-required/aria-invalid on the field. Sync and async validator
directives next to ngModel are attached to the control by the component
until @angular/forms does it for custom controls (angular/angular#70723),
and the initial ngModel write is not announced. No hidden input and no
generated name; the id, aria-label, aria-labelledby and aria-describedby
go to the text field, and label renders an inline label inside the
container.

Keyboard on the chip set engine: two tab stops (last chip and field),
Backspace or the arrow toward the chips moves to the last chip, the arrow
away from the last chip returns to the field, mirrored in RTL, printable
keys on a chip go to the field. Focus after a removal moves to the
neighbour, or to the field after the last chip. A chip placed inside
c-chip-input is ignored with a warning.

c-chip size and c-chip-set selectionMode spell out their values in the input
types, so the API tables show 'sm' | 'lg' and 'single' | 'multiple'.
---
 .../lib/chip-input/chip-input.component.html  |  24 +
 .../chip-input/chip-input.component.spec.ts   | 510 ++++++++++++++++
 .../lib/chip-input/chip-input.component.ts    | 549 ++++++++++++++++++
 .../lib/chip-input/chip-input.forms.spec.ts   | 203 +++++++
 .../chip-input/chip-input.keyboard.spec.ts    | 287 +++++++++
 .../src/lib/chip-input/chip-input.module.ts   |   8 +
 .../chip-input/chip-input.validators.spec.ts  | 138 +++++
 .../src/lib/chip-input/index.ts               |   1 +
 .../src/lib/chip-input/public_api.ts          |   2 +
 .../src/lib/chip-set/chip-set.component.ts    |   4 +-
 .../src/lib/chip-set/chip-set.service.ts      |  57 +-
 .../src/lib/chip/chip-set-ref.ts              |   1 +
 .../src/lib/chip/chip.component.ts            |  13 +-
 projects/coreui-angular/src/public-api.ts     |   1 +
 14 files changed, 1784 insertions(+), 14 deletions(-)
 create mode 100644 projects/coreui-angular/src/lib/chip-input/chip-input.component.html
 create mode 100644 projects/coreui-angular/src/lib/chip-input/chip-input.component.spec.ts
 create mode 100644 projects/coreui-angular/src/lib/chip-input/chip-input.component.ts
 create mode 100644 projects/coreui-angular/src/lib/chip-input/chip-input.forms.spec.ts
 create mode 100644 projects/coreui-angular/src/lib/chip-input/chip-input.keyboard.spec.ts
 create mode 100644 projects/coreui-angular/src/lib/chip-input/chip-input.module.ts
 create mode 100644 projects/coreui-angular/src/lib/chip-input/chip-input.validators.spec.ts
 create mode 100644 projects/coreui-angular/src/lib/chip-input/index.ts
 create mode 100644 projects/coreui-angular/src/lib/chip-input/public_api.ts

diff --git a/projects/coreui-angular/src/lib/chip-input/chip-input.component.html b/projects/coreui-angular/src/lib/chip-input/chip-input.component.html
new file mode 100644
index 00000000..db9cd599
--- /dev/null
+++ b/projects/coreui-angular/src/lib/chip-input/chip-input.component.html
@@ -0,0 +1,24 @@
+@if (label(); as label) {
+  <label class="chip-input-label" [for]="id()">{{ label }}</label>
+}
+@for (item of items(); track item) {
+  <c-chip [class]="chipClass(item)" [value]="item">{{ item }}</c-chip>
+}
+<input
+  #field
+  type="text"
+  class="chip-input-field"
+  [attr.aria-describedby]="ariaDescribedBy() ?? null"
+  [attr.aria-invalid]="state() === 'invalid' ? 'true' : null"
+  [attr.aria-label]="ariaLabel() ?? null"
+  [attr.aria-labelledby]="ariaLabelledBy() ?? null"
+  [attr.aria-required]="required() ? 'true' : null"
+  [attr.size]="fieldSize()"
+  [disabled]="disabled()"
+  [id]="id()"
+  [placeholder]="placeholder()"
+  [readOnly]="readonly() && !disabled()"
+  (input)="onFieldInput($event)"
+  (keydown)="onFieldKeydown($event)"
+  (paste)="onFieldPaste($event)"
+/>
diff --git a/projects/coreui-angular/src/lib/chip-input/chip-input.component.spec.ts b/projects/coreui-angular/src/lib/chip-input/chip-input.component.spec.ts
new file mode 100644
index 00000000..7a6ea73b
--- /dev/null
+++ b/projects/coreui-angular/src/lib/chip-input/chip-input.component.spec.ts
@@ -0,0 +1,510 @@
+import { Component, provideZonelessChangeDetection, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ChipComponent } from '../chip/chip.component';
+import { ChipSetComponent } from '../chip-set/chip-set.component';
+import { AnnouncerService } from '../services/announcer.service';
+import { ChipInputComponent } from './chip-input.component';
+
+const KEY_CODES: Record<string, number> = { Enter: 13, Delete: 46, Backspace: 8 };
+
+const press = (target: Element, key: string) =>
+  target.dispatchEvent(new KeyboardEvent('keydown', { key, keyCode: KEY_CODES[key], bubbles: true, cancelable: true }));
+
+@Component({
+  imports: [ChipInputComponent, ChipSetComponent, ChipComponent],
+  template: `
+    <label for="tags">Tags</label>
+    <c-chip-input
+      id="tags"
+      placeholder="Add a tag"
+      [ariaRemoveLabel]="removeLabel()"
+      [chipClassName]="chipClassName()"
+      [createOnBlur]="createOnBlur()"
+      [disabled]="disabled()"
+      [label]="label()"
+      [maxChips]="maxChips()"
+      [readonly]="readonly()"
+      [selectable]="selectable()"
+      [selectionMode]="mode()"
+      [(selected)]="selected"
+      [(value)]="value"
+      (add)="added.push($event)"
+      (inputChange)="texts.push($event)"
+      (remove)="removed.push($event)"
+    />
+    <button id="outside">Outside</button>
+    <c-chip-set><c-chip removable value="other">Other</c-chip></c-chip-set>
+  `
+})
+class ChipInputHostComponent {
+  readonly chipClassName = signal<string | ((value: string) => string) | undefined>(undefined);
+  readonly createOnBlur = signal(true);
+  readonly disabled = signal(false);
+  readonly label = signal<string | undefined>(undefined);
+  readonly maxChips = signal<number | null>(null);
+  readonly mode = signal<'single' | 'multiple'>('multiple');
+  readonly readonly = signal(false);
+  readonly removeLabel = signal('Remove');
+  readonly selectable = signal(false);
+  readonly selected = signal<string[]>([]);
+  readonly value = signal<string[]>([]);
+  readonly added: string[] = [];
+  readonly removed: string[] = [];
+  readonly texts: string[] = [];
+}
+
+describe('ChipInputComponent', () => {
+  let fixture: ComponentFixture<ChipInputHostComponent>;
+  let host: ChipInputHostComponent;
+  let root: HTMLElement;
+  let announce: ReturnType<typeof vi.spyOn>;
+
+  const element = () => root.querySelector<HTMLElement>('c-chip-input')!;
+  const field = () => element().querySelector<HTMLInputElement>('input.chip-input-field')!;
+  const chips = () => [...element().querySelectorAll<HTMLElement>('c-chip')];
+  const chip = (value: string) => chips().find((item) => item.getAttribute('data-coreui-chip-value') === value)!;
+  const type = (text: string) => {
+    field().value = text;
+    field().dispatchEvent(new Event('input', { bubbles: true }));
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChipInputHostComponent],
+      providers: [provideZonelessChangeDetection()]
+    }).compileComponents();
+    announce = vi.spyOn(TestBed.inject(AnnouncerService), 'announce').mockReturnValue(vi.fn());
+    fixture = TestBed.createComponent(ChipInputHostComponent);
+    host = fixture.componentInstance;
+    root = fixture.nativeElement;
+    document.body.append(root);
+  });
+
+  afterEach(() => {
+    root.remove();
+    vi.restoreAllMocks();
+  });
+
+  it('loads and displays ChipInput component', async () => {
+    host.value.set(['a', 'b']);
+    await fixture.whenStable();
+    expect(element().classList.contains('chip-input')).toBe(true);
+    expect(chips().map((item) => item.textContent?.trim())).toEqual(['a', 'b']);
+    expect(field().placeholder).toBe('Add a tag');
+  });
+
+  it('gives the id to the text field, so an external label names it', async () => {
+    await fixture.whenStable();
+    const withId = root.querySelectorAll('#tags');
+    expect(withId.length).toBe(1);
+    expect(withId[0]).toBe(field());
+    expect(field().labels?.[0]?.textContent).toBe('Tags');
+  });
+
+  it('renders an inline label for the text field inside the container', async () => {
+    host.label.set('Skills:');
+    await fixture.whenStable();
+    const label = element().querySelector<HTMLLabelElement>('label.chip-input-label')!;
+    expect(label.textContent).toBe('Skills:');
+    expect(element().firstElementChild).toBe(label);
+    expect([...(field().labels ?? [])]).toContain(label);
+    const pressed = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
+    label.dispatchEvent(pressed);
+    expect(pressed.defaultPrevented).toBe(true);
+  });
+
+  it('has no role and no aria-disabled on the host', async () => {
+    host.disabled.set(true);
+    await fixture.whenStable();
+    expect(element().getAttribute('role')).toBeNull();
+    expect(element().getAttribute('aria-disabled')).toBeNull();
+  });
+
+  it('adds a chip on Enter', async () => {
+    await fixture.whenStable();
+    type('  Angular ');
+    await fixture.whenStable();
+    expect(field().size).toBe(10);
+    const enter = new KeyboardEvent('keydown', { key: 'Enter', keyCode: 13, bubbles: true, cancelable: true });
+    field().dispatchEvent(enter);
+    expect(enter.defaultPrevented).toBe(true);
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['Angular']);
+    expect(host.added).toEqual(['Angular']);
+    expect(field().value).toBe('');
+    expect(chips().length).toBe(1);
+  });
+
+  it('does not add a duplicate or an empty chip', async () => {
+    host.value.set(['a']);
+    await fixture.whenStable();
+    type('a');
+    press(field(), 'Enter');
+    type('   ');
+    press(field(), 'Enter');
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a']);
+    expect(host.added).toEqual([]);
+  });
+
+  it('splits typed text on the separator and keeps the last part in the field', async () => {
+    await fixture.whenStable();
+    type('a,b,c');
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a', 'b']);
+    expect(field().value).toBe('c');
+    expect(host.texts.at(-1)).toBe('c');
+  });
+
+  it('adds every part of pasted text', async () => {
+    await fixture.whenStable();
+    const event = new Event('paste', { bubbles: true, cancelable: true }) as ClipboardEvent;
+    Object.defineProperty(event, 'clipboardData', { value: { getData: () => 'x, y ,z' } });
+    field().dispatchEvent(event);
+    await fixture.whenStable();
+    expect(event.defaultPrevented).toBe(true);
+    expect(host.value()).toEqual(['x', 'y', 'z']);
+  });
+
+  it('stops adding at maxChips', async () => {
+    host.maxChips.set(2);
+    await fixture.whenStable();
+    type('a,b,c,');
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a', 'b']);
+  });
+
+  it('removes a chip with its remove button', async () => {
+    host.value.set(['a', 'b']);
+    await fixture.whenStable();
+    chip('a').querySelector<HTMLButtonElement>('button.chip-remove')!.click();
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['b']);
+    expect(host.removed).toEqual(['a']);
+  });
+
+  it('names the remove buttons with its label and the chip value', async () => {
+    host.value.set(['a']);
+    host.removeLabel.set('Usuń');
+    await fixture.whenStable();
+    expect(chip('a').querySelector('button.chip-remove')?.getAttribute('aria-label')).toBe('Usuń a');
+  });
+
+  it('selects chips as toggle buttons and deselects siblings in single mode', async () => {
+    host.value.set(['a', 'b']);
+    host.selectable.set(true);
+    host.mode.set('single');
+    await fixture.whenStable();
+    expect(chip('a').getAttribute('role')).toBe('button');
+    expect(chip('a').getAttribute('aria-pressed')).toBe('false');
+    chip('a').click();
+    chip('b').click();
+    await fixture.whenStable();
+    expect(host.selected()).toEqual(['b']);
+    expect(chip('a').getAttribute('aria-pressed')).toBe('false');
+    expect(chip('b').getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('leaves the disabled semantics to the field', async () => {
+    host.value.set(['a']);
+    host.disabled.set(true);
+    await fixture.whenStable();
+    expect(field().disabled).toBe(true);
+    expect(element().classList.contains('disabled')).toBe(true);
+    expect(chip('a').querySelector('.chip-remove')).toBeNull();
+    expect(chip('a').getAttribute('tabindex')).toBeNull();
+  });
+
+  it('leaves the readonly semantics to the field and blocks every change', async () => {
+    host.value.set(['a']);
+    host.selectable.set(true);
+    host.readonly.set(true);
+    await fixture.whenStable();
+    expect(field().readOnly).toBe(true);
+    expect(chip('a').querySelector('.chip-remove')).toBeNull();
+    expect(chip('a').getAttribute('aria-disabled')).toBe('true');
+    expect(chip('a').classList.contains('chip-clickable')).toBe(false);
+    chip('a').click();
+    press(chip('a'), 'Delete');
+    type('b');
+    press(field(), 'Enter');
+    await fixture.whenStable();
+    expect(host.selected()).toEqual([]);
+    expect(host.value()).toEqual(['a']);
+  });
+
+  it('creates a chip when focus leaves the component, also through one of its chips', async () => {
+    host.value.set(['a']);
+    await fixture.whenStable();
+    const leave = (from: Element, to: Element | null) =>
+      from.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: to }));
+    type('b');
+    leave(field(), chip('a'));
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a']);
+
+    leave(chip('a'), root.querySelector('#outside'));
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a', 'b']);
+
+    type('c');
+    leave(field(), root.querySelector('c-chip-set c-chip'));
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a', 'b', 'c']);
+
+    host.createOnBlur.set(false);
+    await fixture.whenStable();
+    type('d');
+    leave(field(), null);
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a', 'b', 'c']);
+  });
+
+  it('drops a removed chip from the selection', async () => {
+    host.value.set(['a', 'b']);
+    host.selectable.set(true);
+    host.selected.set(['a']);
+    await fixture.whenStable();
+    chip('a').querySelector<HTMLButtonElement>('button.chip-remove')!.click();
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['b']);
+    expect(host.selected()).toEqual([]);
+  });
+
+  it('keeps the selection of a readonly control when the field gets focus', async () => {
+    host.value.set(['a']);
+    host.selectable.set(true);
+    host.readonly.set(true);
+    host.selected.set(['a']);
+    await fixture.whenStable();
+    field().focus();
+    await fixture.whenStable();
+    expect(host.selected()).toEqual(['a']);
+  });
+
+  it('keeps text that the chip limit refused', async () => {
+    host.maxChips.set(1);
+    await fixture.whenStable();
+    type('a,b,c');
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a']);
+    expect(field().value).toBe('b,c');
+
+    host.value.set([]);
+    await fixture.whenStable();
+    press(field(), 'Enter');
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['b']);
+    expect(field().value).toBe('c');
+  });
+
+  it('pastes into the text already in the field', async () => {
+    await fixture.whenStable();
+    type('foobaz');
+    field().setSelectionRange(3, 3);
+    const event = new Event('paste', { bubbles: true, cancelable: true }) as ClipboardEvent;
+    Object.defineProperty(event, 'clipboardData', { value: { getData: () => ',bar,' } });
+    field().dispatchEvent(event);
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['foo', 'bar', 'baz']);
+    expect(field().value).toBe('');
+  });
+
+  it('ignores Enter while an input method is composing', async () => {
+    await fixture.whenStable();
+    type('とうきょう');
+    field().dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', isComposing: true, bubbles: true, cancelable: true })
+    );
+    field().dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', keyCode: 229, bubbles: true, cancelable: true })
+    );
+    await fixture.whenStable();
+    expect(host.value()).toEqual([]);
+    expect(field().value).toBe('とうきょう');
+  });
+
+  it('keeps focus in the field when the background is pressed', async () => {
+    await fixture.whenStable();
+    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
+    element().dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(true);
+    host.value.set(['a']);
+    await fixture.whenStable();
+    for (const target of [field(), chip('a')]) {
+      const pressed = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
+      target.dispatchEvent(pressed);
+      expect(pressed.defaultPrevented).toBe(false);
+    }
+  });
+
+  it('adds the class from chipClassName to each chip', async () => {
+    host.value.set(['a', 'b']);
+    host.chipClassName.set((value) => (value === 'a' ? 'chip-primary' : 'chip-secondary'));
+    await fixture.whenStable();
+    expect(chip('a').classList.contains('chip-primary')).toBe(true);
+    expect(chip('b').classList.contains('chip-secondary')).toBe(true);
+    expect(chip('a').classList.contains('chip')).toBe(true);
+  });
+
+  it('renders a normalized list without writing it back to the value', async () => {
+    host.value.set([' a', 'a', 'b ']);
+    await fixture.whenStable();
+    expect(chips().map((item) => item.getAttribute('data-coreui-chip-value'))).toEqual(['a', 'b']);
+    expect(host.value()).toEqual([' a', 'a', 'b ']);
+  });
+
+  it('announces added and removed chips', async () => {
+    host.value.set(['a']);
+    await fixture.whenStable();
+    type('x');
+    press(field(), 'Enter');
+    await fixture.whenStable();
+    expect(announce).toHaveBeenCalledWith('x added', { context: element() });
+
+    host.value.set(['a']);
+    await fixture.whenStable();
+    expect(announce).toHaveBeenCalledWith('x removed', { context: element() });
+  });
+
+  it('has no hidden form input', async () => {
+    host.value.set(['a']);
+    await fixture.whenStable();
+    expect(element().querySelector('input[type="hidden"]')).toBeNull();
+    expect(element().querySelector('[name]')).toBeNull();
+  });
+});
+
+@Component({
+  imports: [ChipInputComponent, ChipComponent],
+  template: `<c-chip-input [value]="['a']"><c-chip value="stray">Stray</c-chip></c-chip-input>`
+})
+class StrayChipHostComponent {}
+
+describe('ChipInputComponent with a projected chip', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ providers: [provideZonelessChangeDetection()] });
+  });
+
+  it('ignores the chip and warns', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+    const fixture = TestBed.createComponent(StrayChipHostComponent);
+    await fixture.whenStable();
+    const element = fixture.nativeElement.querySelector('c-chip-input') as HTMLElement;
+    expect([...element.querySelectorAll('c-chip')].map((chip) => chip.getAttribute('data-coreui-chip-value'))).toEqual([
+      'a'
+    ]);
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('c-chip-input'));
+    warn.mockRestore();
+  });
+});
+
+@Component({
+  imports: [ChipInputComponent],
+  template: `
+    <c-chip-input
+      ariaAddedAnnouncement="dodano"
+      ariaRemovedAnnouncement="usunięto"
+      chipClassName="chip-primary"
+      filter
+      maxChips="2"
+      separator=";"
+      size="sm"
+      [(selected)]="selected"
+      [(value)]="value"
+    />
+    <c-chip-input
+      id="plain"
+      aria-describedby="plainHint"
+      aria-label="Plain tags"
+      aria-labelledby="plainHint"
+      [separator]="null"
+      [(value)]="plain"
+    />
+    <c-chip-input maxChips="" [(value)]="unlimited" />
+    <span id="plainHint">Hint</span>
+  `
+})
+class OptionsHostComponent {
+  readonly plain = signal<string[]>([]);
+  readonly selected = signal<string[]>(['a']);
+  readonly unlimited = signal<string[]>([]);
+  readonly value = signal<string[]>(['a']);
+}
+
+describe('ChipInputComponent options', () => {
+  let fixture: ComponentFixture<OptionsHostComponent>;
+  let announce: ReturnType<typeof vi.spyOn>;
+  const inputs = () => [...fixture.nativeElement.querySelectorAll('c-chip-input')] as HTMLElement[];
+  const typeInto = (element: HTMLElement, text: string) => {
+    const field = element.querySelector<HTMLInputElement>('input')!;
+    field.value = text;
+    field.dispatchEvent(new Event('input', { bubbles: true }));
+  };
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({ providers: [provideZonelessChangeDetection()] });
+    announce = vi.spyOn(TestBed.inject(AnnouncerService), 'announce').mockReturnValue(vi.fn());
+    fixture = TestBed.createComponent(OptionsHostComponent);
+    await fixture.whenStable();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('passes size, chipClassName and filter to the chips', () => {
+    const [element] = inputs();
+    const chip = element.querySelector<HTMLElement>('c-chip')!;
+    expect(element.classList.contains('chip-input-sm')).toBe(true);
+    expect(chip.classList.contains('chip-primary')).toBe(true);
+    expect(chip.getAttribute('role')).toBe('button');
+    expect(chip.querySelector('.chip-check')).not.toBeNull();
+  });
+
+  it('moves aria-label, aria-labelledby and aria-describedby from the host to the text field', () => {
+    const plain = inputs()[1];
+    const field = plain.querySelector('input')!;
+    expect(field.getAttribute('aria-label')).toBe('Plain tags');
+    expect(field.getAttribute('aria-labelledby')).toBe('plainHint');
+    expect(field.getAttribute('aria-describedby')).toBe('plainHint');
+    expect(plain.getAttribute('aria-label')).toBeNull();
+    expect(plain.getAttribute('aria-labelledby')).toBeNull();
+    expect(plain.getAttribute('aria-describedby')).toBeNull();
+  });
+
+  it('splits on its own separator, and not at all without one', async () => {
+    const [element, plain] = inputs();
+    typeInto(element, 'b;c');
+    typeInto(plain, 'x,y');
+    await fixture.whenStable();
+    expect(fixture.componentInstance.value()).toEqual(['a', 'b']);
+    expect(fixture.componentInstance.plain()).toEqual([]);
+    expect(plain.querySelector('input')!.value).toBe('x,y');
+  });
+
+  it('reads maxChips from a static attribute, and an empty one as no limit', async () => {
+    const [element, , unlimited] = inputs();
+    const [limited, , open] = fixture.debugElement
+      .queryAll(By.directive(ChipInputComponent))
+      .map((item) => item.componentInstance as ChipInputComponent);
+    expect(limited.maxChips()).toBe(2);
+    expect(open.maxChips()).toBeNull();
+    typeInto(element, 'b;c;');
+    typeInto(unlimited, 'x,y,z,');
+    await fixture.whenStable();
+    expect(fixture.componentInstance.value()).toEqual(['a', 'b']);
+    expect(fixture.componentInstance.unlimited()).toEqual(['x', 'y', 'z']);
+  });
+
+  it('announces with its own wording', async () => {
+    const [element] = inputs();
+    typeInto(element, 'b;');
+    await fixture.whenStable();
+    expect(announce).toHaveBeenCalledWith('b dodano', { context: element });
+    fixture.componentInstance.value.set(['b']);
+    await fixture.whenStable();
+    expect(announce).toHaveBeenCalledWith('a usunięto', { context: element });
+  });
+});
diff --git a/projects/coreui-angular/src/lib/chip-input/chip-input.component.ts b/projects/coreui-angular/src/lib/chip-input/chip-input.component.ts
new file mode 100644
index 00000000..e86684fa
--- /dev/null
+++ b/projects/coreui-angular/src/lib/chip-input/chip-input.component.ts
@@ -0,0 +1,549 @@
+import {
+  AfterContentInit,
+  booleanAttribute,
+  Component,
+  computed,
+  contentChildren,
+  ElementRef,
+  inject,
+  input,
+  model,
+  numberAttribute,
+  output,
+  signal,
+  viewChild
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AsyncValidator, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgModel, Validator } from '@angular/forms';
+import { take } from 'rxjs';
+import { ChipComponent } from '../chip/chip.component';
+import { ChipSetRef } from '../chip/chip-set-ref';
+import { ChipSetService } from '../chip-set/chip-set.service';
+import { RtlService } from '../services/rtl.service';
+import { UIDService } from '../services/uid.service';
+
+@Component({
+  selector: 'c-chip-input',
+  exportAs: 'cChipInput',
+  templateUrl: './chip-input.component.html',
+  imports: [ChipComponent],
+  providers: [ChipSetService, { provide: ChipSetRef, useExisting: ChipSetService }],
+  host: {
+    class: 'chip-input',
+    '[class]': 'hostClasses()',
+    '[attr.id]': 'null',
+    '[attr.aria-describedby]': 'null',
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+    '(click)': 'onClick($event)',
+    '(mousedown)': 'onMousedown($event)',
+    '(keydown)': 'onKeydown($event)',
+    '(focusin)': 'onFocusin($event)',
+    '(focusout)': 'onFocusout($event)'
+  }
+})
+export class ChipInputComponent implements AfterContentInit {
+  readonly #elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  readonly #ngModel = inject(NgModel, { self: true, optional: true });
+  readonly #asyncValidators = inject<(AsyncValidator | unknown)[]>(NG_ASYNC_VALIDATORS, { self: true, optional: true });
+  readonly #validators = inject<(Validator | unknown)[]>(NG_VALIDATORS, { self: true, optional: true });
+  readonly #rtl = inject(RtlService);
+  readonly #service = inject(ChipSetService);
+
+  readonly field = viewChild.required<ElementRef<HTMLInputElement>>('field');
+  readonly projectedChips = contentChildren(ChipComponent);
+
+  /**
+   * Wording announced to screen readers after a chip is added; the chip value is prepended.
+   * @returns string
+   * @default 'added'
+   */
+  readonly ariaAddedAnnouncement = input('added');
+
+  /**
+   * Id of the element that describes the text field, e.g. a hint or a `c-form-feedback`.
+   * @returns string | undefined
+   * @default undefined
+   */
+  readonly ariaDescribedBy = input<string>(undefined, { alias: 'aria-describedby' });
+
+  /**
+   * Accessible name of the text field when there is no visible label.
+   * @returns string | undefined
+   * @default undefined
+   */
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' });
+
+  /**
+   * Id of the element that names the text field.
+   * @returns string | undefined
+   * @default undefined
+   */
+  readonly ariaLabelledBy = input<string>(undefined, { alias: 'aria-labelledby' });
+
+  /**
+   * Label of the remove buttons; each chip appends its value, e.g. `'Remove Angular'`.
+   * @returns string
+   * @default 'Remove'
+   */
+  readonly ariaRemoveLabel = input('Remove');
+
+  /**
+   * Wording announced to screen readers after a chip is removed; the chip value is prepended.
+   * @returns string
+   * @default 'removed'
+   */
+  readonly ariaRemovedAnnouncement = input('removed');
+
+  /**
+   * Extra class for every chip, or a function that returns the class for a chip value.
+   * @returns string | ((value: string) => string) | undefined
+   * @default undefined
+   */
+  readonly chipClassName = input<string | ((value: string) => string)>();
+
+  /**
+   * Turns the text left in the field into a chip when focus leaves the component.
+   * @returns boolean
+   * @default true
+   */
+  readonly createOnBlur = input(true, { transform: booleanAttribute });
+
+  /**
+   * Disables the field and every chip.
+   * @returns boolean
+   * @default false
+   */
+  readonly disabled = input(false, { transform: booleanAttribute });
+
+  /**
+   * Makes the chips filter chips: selectable, with a check icon while selected.
+   * @returns boolean
+   * @default false
+   */
+  readonly filter = input(false, { transform: booleanAttribute });
+
+  /**
+   * Id of the text field, the target of an external `<label for>`.
+   * @returns string
+   * @default generated
+   */
+  readonly id = input(inject(UIDService).getUID('chip-input'));
+
+  /**
+   * Set by the form when the value is invalid; shown once the control is touched.
+   * @returns boolean
+   * @default false
+   */
+  readonly invalid = input(false, { transform: booleanAttribute });
+
+  /**
+   * Renders an inline label inside the Angular Chip Input component container.
+   * @returns string | undefined
+   * @default undefined
+   */
+  readonly label = input<string>();
+
+  /**
+   * Maximum number of chips; `null` for no limit.
+   * @returns number | null
+   * @default null
+   */
+  readonly maxChips = input<number | null, unknown>(null, {
+    transform: (value: unknown) => {
+      const maxChips = numberAttribute(value);
+      return Number.isNaN(maxChips) ? null : maxChips;
+    }
+  });
+
+  /**
+   * Placeholder of the text field.
+   * @returns string
+   * @default ''
+   */
+  readonly placeholder = input('');
+
+  /**
+   * Keeps the chips visible but blocks adding, removing and selecting them.
+   * @returns boolean
+   * @default false
+   */
+  readonly readonly = input(false, { transform: booleanAttribute });
+
+  /**
+   * Shows remove buttons on the chips.
+   * @returns boolean
+   * @default true
+   */
+  readonly removable = input(true, { transform: booleanAttribute });
+
+  /**
+   * Set by the form when a value is required; adds `aria-required` to the text field.
+   * @returns boolean
+   * @default false
+   */
+  readonly required = input(false, { transform: booleanAttribute });
+
+  /**
+   * Makes the chips selectable.
+   * @returns boolean
+   * @default false
+   */
+  readonly selectable = input(false, { transform: booleanAttribute });
+
+  /**
+   * Values of the selected chips, two-way bindable with `[(selected)]`.
+   * @returns string[]
+   * @default []
+   */
+  readonly selected = model<string[]>([]);
+
+  /**
+   * Sets how many chips can be selected at once.
+   * @returns 'single' | 'multiple'
+   * @default 'multiple'
+   */
+  readonly selectionMode = input<'single' | 'multiple'>('multiple');
+
+  /**
+   * Character that splits typed or pasted text into chips; `null` turns splitting off.
+   * @returns string | null
+   * @default ','
+   */
+  readonly separator = input<string | null>(',');
+
+  /**
+   * Size of the component.
+   * @returns 'sm' | 'lg' | undefined
+   * @default undefined
+   */
+  readonly size = input<'sm' | 'lg'>();
+
+  /**
+   * Set by the form once the control has been touched.
+   * @returns boolean
+   * @default false
+   */
+  readonly touched = input(false, { transform: booleanAttribute });
+
+  /**
+   * Validation state set by the page; it wins over the state reported by the form.
+   * @returns 'valid' | 'invalid' | undefined
+   * @default undefined
+   */
+  readonly validationState = input<'valid' | 'invalid'>();
+
+  /**
+   * Chip values, two-way bindable with `[(value)]` or bound by a form.
+   * @returns string[]
+   * @default []
+   */
+  readonly value = model<string[]>([]);
+
+  /**
+   * Emits the value of a chip added by the user.
+   * @returns string
+   */
+  readonly add = output<string>();
+
+  /**
+   * Emits the text of the field when it changes.
+   * @returns string
+   */
+  readonly inputChange = output<string>();
+
+  /**
+   * Emits the value of a chip removed by the user.
+   * @returns string
+   */
+  readonly remove = output<string>();
+
+  /**
+   * Emits when focus leaves the component.
+   */
+  readonly touch = output<void>();
+
+  readonly text = signal('');
+
+  readonly items = computed(() => [
+    ...new Set((this.value() ?? []).map((value) => String(value).trim()).filter(Boolean))
+  ]);
+
+  readonly canAdd = computed(() => {
+    const maxChips = this.maxChips();
+    return maxChips === null || this.items().length < maxChips;
+  });
+
+  readonly state = computed(() => this.validationState() ?? (this.invalid() && this.touched() ? 'invalid' : undefined));
+
+  readonly fieldSize = computed(() => Math.max(this.placeholder().length, this.text().length, 1));
+
+  readonly hostClasses = computed(() => ({
+    [`chip-input-${this.size()}`]: !!this.size(),
+    disabled: this.disabled(),
+    'is-invalid': this.state() === 'invalid',
+    'is-valid': this.state() === 'valid'
+  }));
+
+  constructor() {
+    this.#service.attach({
+      ariaAddedAnnouncement: this.ariaAddedAnnouncement,
+      ariaRemoveLabel: this.ariaRemoveLabel,
+      ariaRemovedAnnouncement: this.ariaRemovedAnnouncement,
+      disabled: this.disabled,
+      element: this.#elementRef.nativeElement,
+      filter: this.filter,
+      initialStop: 'last',
+      isListbox: computed(() => false),
+      readonly: this.readonly,
+      removable: computed(() => this.removable() && !this.disabled() && !this.readonly()),
+      removeIcon: computed(() => undefined),
+      selectable: this.selectable,
+      selected: this.selected,
+      selectedIcon: computed(() => undefined),
+      selectionMode: this.selectionMode,
+      focusFallback: () => this.focus(),
+      removeRequested: (value) => this.#removeChip(value)
+    });
+    this.#attachValidators();
+    this.#ngModel?.control.valueChanges.pipe(take(1), takeUntilDestroyed()).subscribe(() => this.#service.resync());
+  }
+
+  ngAfterContentInit(): void {
+    this.#watchValidators();
+    if (this.projectedChips().length > 0) {
+      console.warn('CoreUI [c-chip] placed inside c-chip-input is ignored - chips come from its value');
+    }
+  }
+
+  focus(): void {
+    this.field().nativeElement.focus();
+  }
+
+  chipClass(value: string): string | null {
+    const className = this.chipClassName();
+    return (typeof className === 'function' ? className(value) : className) ?? null;
+  }
+
+  onClick($event: MouseEvent): void {
+    if ($event.target === this.#elementRef.nativeElement) {
+      this.focus();
+    }
+  }
+
+  onMousedown($event: MouseEvent): void {
+    const target = $event.target as Element;
+    if (target === this.#elementRef.nativeElement || target.closest?.('.chip-input-label')) {
+      $event.preventDefault();
+    }
+  }
+
+  onKeydown($event: KeyboardEvent): void {
+    if ($event.target === this.field().nativeElement) {
+      return;
+    }
+    const intoField = this.#isRtl() ? 'ArrowLeft' : 'ArrowRight';
+    if ($event.key === intoField && this.#service.isLastFocusable($event.target)) {
+      $event.preventDefault();
+      this.focus();
+      return;
+    }
+    this.#service.handleKeydown($event);
+    if (!$event.defaultPrevented && this.#isPrintable($event)) {
+      this.focus();
+    }
+  }
+
+  onFocusin($event: FocusEvent): void {
+    this.#service.handleFocusin($event);
+    if ($event.target === this.field().nativeElement) {
+      this.#service.resetStop();
+      if (!this.readonly() && this.selected().length > 0) {
+        this.selected.set([]);
+      }
+    }
+  }
+
+  onFocusout($event: FocusEvent): void {
+    this.#service.handleFocusout($event);
+    const next = $event.relatedTarget;
+    if (next) {
+      if (!this.#contains(next)) {
+        this.#leave();
+      }
+      return;
+    }
+    const target = $event.target as Node;
+    queueMicrotask(() => {
+      const document = target.ownerDocument;
+      if (target.isConnected && document?.hasFocus() && !this.#contains(document.activeElement)) {
+        this.#leave();
+      }
+    });
+  }
+
+  onFieldInput($event: Event): void {
+    const value = ($event.target as HTMLInputElement).value;
+    const separator = this.separator();
+    if (separator && value.includes(separator) && this.canAdd()) {
+      const parts = value.split(separator);
+      const left = this.#addChips(parts.slice(0, -1));
+      this.#setText([...left, parts.at(-1) ?? ''].join(separator));
+      return;
+    }
+    this.#setText(value);
+  }
+
+  onFieldKeydown($event: KeyboardEvent): void {
+    if ($event.isComposing || $event.keyCode === 229) {
+      return;
+    }
+    const field = this.field().nativeElement;
+    switch ($event.key) {
+      case 'Enter': {
+        $event.preventDefault();
+        this.#createFromText();
+        break;
+      }
+      case 'Backspace':
+      case 'Delete': {
+        if (this.text() === '' && !$event.repeat && this.#service.focusLast()) {
+          $event.preventDefault();
+        }
+        break;
+      }
+      case 'ArrowLeft':
+      case 'ArrowRight': {
+        const towardChips = this.#isRtl() ? 'ArrowRight' : 'ArrowLeft';
+        if (
+          $event.key === towardChips &&
+          field.selectionStart === 0 &&
+          field.selectionEnd === 0 &&
+          this.#service.focusLast()
+        ) {
+          $event.preventDefault();
+        }
+        break;
+      }
+      case 'Escape': {
+        this.#setText('');
+        field.blur();
+        break;
+      }
+    }
+  }
+
+  onFieldPaste($event: ClipboardEvent): void {
+    const separator = this.separator();
+    const pasted = $event.clipboardData?.getData('text') ?? '';
+    if (this.disabled() || this.readonly() || !separator || !pasted.includes(separator) || !this.canAdd()) {
+      return;
+    }
+    $event.preventDefault();
+    const field = this.field().nativeElement;
+    const start = field.selectionStart ?? field.value.length;
+    const end = field.selectionEnd ?? start;
+    const text = field.value.slice(0, start) + pasted + field.value.slice(end);
+    this.#setText(this.#addChips(text.split(separator)).join(separator));
+  }
+
+  #attachValidators(): void {
+    const control = this.#ngModel?.control;
+    const validator = this.#ngModel?.validator;
+    const asyncValidator = this.#ngModel?.asyncValidator;
+    if (validator && control && !control.hasValidator(validator)) {
+      control.addValidators(validator);
+    }
+    if (asyncValidator && control && !control.hasAsyncValidator(asyncValidator)) {
+      control.addAsyncValidators(asyncValidator);
+    }
+  }
+
+  #watchValidators(): void {
+    const control = this.#ngModel?.control;
+    if (!control) {
+      return;
+    }
+    for (const item of [...(this.#validators ?? []), ...(this.#asyncValidators ?? [])]) {
+      (item as Validator | AsyncValidator).registerOnValidatorChange?.(() => control.updateValueAndValidity());
+    }
+  }
+
+  #leave(): void {
+    if (this.createOnBlur()) {
+      this.#createFromText();
+    }
+    this.touch.emit();
+  }
+
+  #createFromText(): void {
+    const separator = this.separator();
+    const text = this.text();
+    const count = this.items().length;
+    const left = this.#addChips(separator ? text.split(separator) : [text]);
+    if (this.items().length > count) {
+      this.#setText(left.join(separator ?? ''));
+    }
+  }
+
+  #addChips(values: string[]): string[] {
+    if (this.disabled() || this.readonly()) {
+      return values;
+    }
+    const maxChips = this.maxChips();
+    const next = [...this.items()];
+    const added: string[] = [];
+    const left: string[] = [];
+    for (const raw of values) {
+      const value = raw.trim();
+      if (!value || next.includes(value)) {
+        continue;
+      }
+      if (maxChips !== null && next.length >= maxChips) {
+        left.push(raw);
+        continue;
+      }
+      next.push(value);
+      added.push(value);
+    }
+    if (added.length > 0) {
+      this.value.set(next);
+      added.forEach((value) => this.add.emit(value));
+    }
+    return left;
+  }
+
+  #removeChip(value: string): void {
+    if (this.disabled() || this.readonly() || !this.items().includes(value)) {
+      return;
+    }
+    this.value.set(this.items().filter((item) => item !== value));
+    if (this.selected().includes(value)) {
+      this.selected.set(this.selected().filter((item) => item !== value));
+    }
+    this.remove.emit(value);
+  }
+
+  #setText(value: string): void {
+    const field = this.field().nativeElement;
+    if (field.value !== value) {
+      field.value = value;
+    }
+    if (this.text() !== value) {
+      this.text.set(value);
+      this.inputChange.emit(value);
+    }
+  }
+
+  #contains(target: EventTarget | null): boolean {
+    return target instanceof Node && this.#elementRef.nativeElement.contains(target);
+  }
+
+  #isPrintable($event: KeyboardEvent): boolean {
+    return $event.key.length === 1 && !$event.metaKey && (!$event.ctrlKey || $event.altKey);
+  }
+
+  #isRtl(): boolean {
+    return this.#rtl.isRTL(this.#elementRef.nativeElement);
+  }
+}
diff --git a/projects/coreui-angular/src/lib/chip-input/chip-input.forms.spec.ts b/projects/coreui-angular/src/lib/chip-input/chip-input.forms.spec.ts
new file mode 100644
index 00000000..18f349a2
--- /dev/null
+++ b/projects/coreui-angular/src/lib/chip-input/chip-input.forms.spec.ts
@@ -0,0 +1,203 @@
+import { Component, provideZonelessChangeDetection, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { FormControl, FormGroup, FormsModule, NgModel, ReactiveFormsModule, Validators } from '@angular/forms';
+import { form, FormField, minLength, required } from '@angular/forms/signals';
+import { AnnouncerService } from '../services/announcer.service';
+import { ChipInputComponent } from './chip-input.component';
+
+const enter = (field: HTMLInputElement, text: string) => {
+  field.value = text;
+  field.dispatchEvent(new Event('input', { bubbles: true }));
+  field.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', keyCode: 13, bubbles: true, cancelable: true }));
+};
+
+const leave = (element: HTMLElement, to: EventTarget | null) =>
+  element.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: to }));
+
+const parts = (root: HTMLElement) => {
+  const element = root.querySelector<HTMLElement>('c-chip-input')!;
+  return {
+    element,
+    field: element.querySelector<HTMLInputElement>('input.chip-input-field')!,
+    chips: () => [...element.querySelectorAll('c-chip')].map((chip) => chip.getAttribute('data-coreui-chip-value')),
+    outside: root.querySelector<HTMLElement>('#outside')!
+  };
+};
+
+@Component({
+  imports: [ReactiveFormsModule, ChipInputComponent],
+  template: `
+    <form [formGroup]="form">
+      <c-chip-input formControlName="tags" [validationState]="state()" />
+    </form>
+    <button id="outside">Outside</button>
+  `
+})
+class ReactiveHostComponent {
+  readonly form = new FormGroup({ tags: new FormControl<string[]>([], Validators.required) });
+  readonly state = signal<'valid' | 'invalid' | undefined>(undefined);
+}
+
+@Component({
+  imports: [FormsModule, ChipInputComponent],
+  template: `
+    <c-chip-input [(ngModel)]="tags" [disabled]="disabled()" />
+    <button id="outside">Outside</button>
+  `
+})
+class TemplateHostComponent {
+  tags: string[] = ['a'];
+  readonly disabled = signal(false);
+}
+
+@Component({
+  imports: [FormField, ChipInputComponent],
+  template: `
+    <c-chip-input [formField]="tagsForm.tags" />
+    <button id="outside">Outside</button>
+  `
+})
+class SignalHostComponent {
+  readonly model = signal({ tags: [] as string[] });
+  readonly tagsForm = form(this.model, (path) => {
+    required(path.tags);
+    minLength(path.tags, 1, { message: 'Add at least one tag' });
+  });
+}
+
+describe('ChipInputComponent forms', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ providers: [provideZonelessChangeDetection()] });
+    vi.spyOn(TestBed.inject(AnnouncerService), 'announce').mockReturnValue(vi.fn());
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('formControlName', () => {
+    let fixture: ComponentFixture<ReactiveHostComponent>;
+
+    beforeEach(async () => {
+      fixture = TestBed.createComponent(ReactiveHostComponent);
+      document.body.append(fixture.nativeElement);
+      await fixture.whenStable();
+    });
+
+    afterEach(() => fixture.nativeElement.remove());
+
+    it('writes the value both ways', async () => {
+      const control = fixture.componentInstance.form.controls.tags;
+      const { field, chips } = parts(fixture.nativeElement);
+      control.setValue(['a']);
+      await fixture.whenStable();
+      expect(chips()).toEqual(['a']);
+
+      enter(field, 'b');
+      await fixture.whenStable();
+      expect(control.value).toEqual(['a', 'b']);
+      expect(control.dirty).toBe(true);
+    });
+
+    it('follows the disabled state of the control', async () => {
+      const { field } = parts(fixture.nativeElement);
+      fixture.componentInstance.form.controls.tags.disable();
+      await fixture.whenStable();
+      expect(field.disabled).toBe(true);
+    });
+
+    it('shows the error only after focus leaves the component', async () => {
+      const { element, field, outside } = parts(fixture.nativeElement);
+      expect(field.getAttribute('aria-required')).toBe('true');
+      expect(element.classList.contains('is-invalid')).toBe(false);
+      expect(field.getAttribute('aria-invalid')).toBeNull();
+
+      fixture.componentInstance.form.controls.tags.setValue(['a']);
+      await fixture.whenStable();
+      const chip = element.querySelector<HTMLElement>('c-chip')!;
+      leave(field, chip);
+      fixture.componentInstance.form.controls.tags.setValue([]);
+      await fixture.whenStable();
+      expect(fixture.componentInstance.form.controls.tags.touched).toBe(false);
+      expect(element.classList.contains('is-invalid')).toBe(false);
+
+      leave(field, outside);
+      await fixture.whenStable();
+      expect(fixture.componentInstance.form.controls.tags.touched).toBe(true);
+      expect(element.classList.contains('is-invalid')).toBe(true);
+      expect(field.getAttribute('aria-invalid')).toBe('true');
+    });
+
+    it('lets validationState win over the form', async () => {
+      const { element, field, outside } = parts(fixture.nativeElement);
+      leave(field, outside);
+      fixture.componentInstance.state.set('valid');
+      await fixture.whenStable();
+      expect(element.classList.contains('is-valid')).toBe(true);
+      expect(element.classList.contains('is-invalid')).toBe(false);
+      expect(field.getAttribute('aria-invalid')).toBeNull();
+    });
+  });
+
+  describe('ngModel', () => {
+    it('writes the value both ways, follows disabled and does not announce the initial value', async () => {
+      const fixture = TestBed.createComponent(TemplateHostComponent);
+      document.body.append(fixture.nativeElement);
+      await fixture.whenStable();
+      const { field, chips } = parts(fixture.nativeElement);
+      expect(chips()).toEqual(['a']);
+      expect(TestBed.inject(AnnouncerService).announce).not.toHaveBeenCalled();
+
+      enter(field, 'b');
+      await fixture.whenStable();
+      expect(fixture.componentInstance.tags).toEqual(['a', 'b']);
+      expect(TestBed.inject(AnnouncerService).announce).toHaveBeenCalledWith('b added', expect.anything());
+
+      fixture.componentInstance.disabled.set(true);
+      await fixture.whenStable();
+      expect(field.disabled).toBe(true);
+      expect(fixture.debugElement.query(By.directive(NgModel)).injector.get(NgModel).control.disabled).toBe(true);
+      fixture.nativeElement.remove();
+    });
+
+    it('announces the first chip added to an empty value', async () => {
+      const fixture = TestBed.createComponent(TemplateHostComponent);
+      fixture.componentInstance.tags = [];
+      document.body.append(fixture.nativeElement);
+      await fixture.whenStable();
+      const { field } = parts(fixture.nativeElement);
+
+      enter(field, 'b');
+      await fixture.whenStable();
+      expect(fixture.componentInstance.tags).toEqual(['b']);
+      expect(TestBed.inject(AnnouncerService).announce).toHaveBeenCalledWith('b added', expect.anything());
+      fixture.nativeElement.remove();
+    });
+  });
+
+  describe('formField', () => {
+    it('writes the value both ways and reports the error after leaving', async () => {
+      const fixture = TestBed.createComponent(SignalHostComponent);
+      document.body.append(fixture.nativeElement);
+      await fixture.whenStable();
+      const { element, field, chips, outside } = parts(fixture.nativeElement);
+      expect(field.getAttribute('aria-required')).toBe('true');
+      expect(element.classList.contains('is-invalid')).toBe(false);
+
+      leave(field, outside);
+      await fixture.whenStable();
+      expect(element.classList.contains('is-invalid')).toBe(true);
+
+      enter(field, 'a');
+      await fixture.whenStable();
+      expect(fixture.componentInstance.model().tags).toEqual(['a']);
+      expect(element.classList.contains('is-invalid')).toBe(false);
+
+      fixture.componentInstance.model.set({ tags: ['x', 'y'] });
+      await fixture.whenStable();
+      expect(chips()).toEqual(['x', 'y']);
+      fixture.nativeElement.remove();
+    });
+  });
+});
diff --git a/projects/coreui-angular/src/lib/chip-input/chip-input.keyboard.spec.ts b/projects/coreui-angular/src/lib/chip-input/chip-input.keyboard.spec.ts
new file mode 100644
index 00000000..02b57492
--- /dev/null
+++ b/projects/coreui-angular/src/lib/chip-input/chip-input.keyboard.spec.ts
@@ -0,0 +1,287 @@
+import { Component, provideZonelessChangeDetection, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AnnouncerService } from '../services/announcer.service';
+import { ChipInputComponent } from './chip-input.component';
+
+const KEY_CODES: Record<string, number> = {
+  ArrowLeft: 37,
+  ArrowRight: 39,
+  Backspace: 8,
+  Delete: 46,
+  End: 35,
+  Escape: 27,
+  Home: 36
+};
+
+const press = (target: Element, key: string, init: KeyboardEventInit = {}) => {
+  const event = new KeyboardEvent('keydown', {
+    key,
+    keyCode: KEY_CODES[key],
+    bubbles: true,
+    cancelable: true,
+    ...init
+  });
+  target.dispatchEvent(event);
+  return event;
+};
+
+@Component({
+  imports: [ChipInputComponent],
+  template: `
+    <div [attr.dir]="dir()">
+      <c-chip-input [selectable]="selectable()" [(selected)]="selected" [(value)]="value" />
+    </div>
+    <button id="outside">Outside</button>
+  `
+})
+class KeyboardHostComponent {
+  readonly dir = signal<string | null>(null);
+  readonly selectable = signal(false);
+  readonly selected = signal<string[]>([]);
+  readonly value = signal<string[]>(['a', 'b', 'c']);
+}
+
+describe('ChipInputComponent keyboard', () => {
+  let fixture: ComponentFixture<KeyboardHostComponent>;
+  let host: KeyboardHostComponent;
+  let root: HTMLElement;
+
+  const element = () => root.querySelector<HTMLElement>('c-chip-input')!;
+  const field = () => element().querySelector<HTMLInputElement>('input.chip-input-field')!;
+  const chip = (value: string) => element().querySelector<HTMLElement>(`c-chip[data-coreui-chip-value="${value}"]`)!;
+  const tabindexes = () => [...element().querySelectorAll('c-chip')].map((item) => item.getAttribute('tabindex'));
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KeyboardHostComponent],
+      providers: [provideZonelessChangeDetection()]
+    }).compileComponents();
+    vi.spyOn(TestBed.inject(AnnouncerService), 'announce').mockReturnValue(vi.fn());
+    fixture = TestBed.createComponent(KeyboardHostComponent);
+    host = fixture.componentInstance;
+    root = fixture.nativeElement;
+    document.body.append(root);
+    await fixture.whenStable();
+  });
+
+  afterEach(() => {
+    root.remove();
+    vi.restoreAllMocks();
+  });
+
+  it('keeps two tab stops: the last chip and the field', () => {
+    expect(tabindexes()).toEqual(['-1', '-1', '0']);
+    expect(field().tabIndex).toBe(0);
+  });
+
+  it('moves the chip stop back to the last chip when the field gets focus', async () => {
+    chip('c').focus();
+    press(chip('c'), 'Home');
+    await fixture.whenStable();
+    expect(document.activeElement).toBe(chip('a'));
+    expect(tabindexes()).toEqual(['0', '-1', '-1']);
+
+    field().focus();
+    await fixture.whenStable();
+    expect(tabindexes()).toEqual(['-1', '-1', '0']);
+  });
+
+  it('moves the chip stop to a chip added with Enter', async () => {
+    field().focus();
+    field().value = 'd';
+    field().dispatchEvent(new Event('input', { bubbles: true }));
+    field().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+    await fixture.whenStable();
+    expect(tabindexes()).toEqual(['-1', '-1', '-1', '0']);
+    expect(chip('d').getAttribute('tabindex')).toBe('0');
+  });
+
+  it('Backspace on an empty field focuses the last chip', () => {
+    field().focus();
+    field().value = 'x';
+    field().dispatchEvent(new Event('input', { bubbles: true }));
+    expect(press(field(), 'Backspace').defaultPrevented).toBe(false);
+    expect(document.activeElement).toBe(field());
+
+    field().value = '';
+    field().dispatchEvent(new Event('input', { bubbles: true }));
+    expect(press(field(), 'Backspace').defaultPrevented).toBe(true);
+    expect(document.activeElement).toBe(chip('c'));
+  });
+
+  it('Delete on an empty field focuses the last chip too', () => {
+    field().focus();
+    expect(press(field(), 'Delete').defaultPrevented).toBe(true);
+    expect(document.activeElement).toBe(chip('c'));
+  });
+
+  it('the arrow toward the chips keeps a text selection in the field', () => {
+    field().focus();
+    field().value = 'xy';
+    field().dispatchEvent(new Event('input', { bubbles: true }));
+    field().setSelectionRange(0, 2);
+    press(field(), 'ArrowLeft');
+    expect(document.activeElement).toBe(field());
+  });
+
+  it('Space on a selectable chip toggles it and keeps focus there', async () => {
+    host.selectable.set(true);
+    await fixture.whenStable();
+    chip('a').focus();
+    press(chip('a'), ' ');
+    await fixture.whenStable();
+    expect(host.selected()).toEqual(['a']);
+    expect(document.activeElement).toBe(chip('a'));
+  });
+
+  it('a held Backspace does not leave the empty field', () => {
+    field().focus();
+    expect(press(field(), 'Backspace', { repeat: true }).defaultPrevented).toBe(false);
+    expect(document.activeElement).toBe(field());
+  });
+
+  it('the arrow toward the chips at the start of the field focuses the last chip', () => {
+    field().focus();
+    field().value = 'xy';
+    field().setSelectionRange(1, 1);
+    press(field(), 'ArrowLeft');
+    expect(document.activeElement).toBe(field());
+
+    field().setSelectionRange(0, 0);
+    press(field(), 'ArrowLeft');
+    expect(document.activeElement).toBe(chip('c'));
+  });
+
+  it('the arrow away from the chips on the last chip focuses the field', () => {
+    chip('a').focus();
+    press(chip('a'), 'ArrowRight');
+    expect(document.activeElement).toBe(chip('b'));
+    chip('c').focus();
+    press(chip('c'), 'ArrowRight');
+    expect(document.activeElement).toBe(field());
+  });
+
+  it('mirrors both arrows in RTL', async () => {
+    host.dir.set('rtl');
+    await fixture.whenStable();
+    field().focus();
+    field().setSelectionRange(0, 0);
+    press(field(), 'ArrowRight');
+    expect(document.activeElement).toBe(chip('c'));
+    press(chip('c'), 'ArrowLeft');
+    expect(document.activeElement).toBe(field());
+  });
+
+  it('Escape clears the field and leaves it', () => {
+    field().focus();
+    field().value = 'draft';
+    field().dispatchEvent(new Event('input', { bubbles: true }));
+    press(field(), 'Escape');
+    expect(field().value).toBe('');
+    expect(document.activeElement).not.toBe(field());
+    expect(host.value()).toEqual(['a', 'b', 'c']);
+  });
+
+  it('a printable key on a chip moves focus to the field, a shortcut does not', () => {
+    chip('b').focus();
+    press(chip('b'), 'c', { ctrlKey: true });
+    expect(document.activeElement).toBe(chip('b'));
+    press(chip('b'), 'v', { metaKey: true });
+    expect(document.activeElement).toBe(chip('b'));
+    press(chip('b'), 'ą', { altKey: true });
+    expect(document.activeElement).toBe(field());
+
+    chip('b').focus();
+    press(chip('b'), 'ł', { ctrlKey: true, altKey: true });
+    expect(document.activeElement).toBe(field());
+
+    chip('b').focus();
+    press(chip('b'), 'x');
+    expect(document.activeElement).toBe(field());
+  });
+
+  it('moves focus to the neighbor after Delete, and to the field after the last chip', async () => {
+    chip('b').focus();
+    press(chip('b'), 'Delete');
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a', 'c']);
+    expect(document.activeElement).toBe(chip('c'));
+
+    host.value.set(['c']);
+    await fixture.whenStable();
+    chip('c').focus();
+    press(chip('c'), 'Backspace');
+    await fixture.whenStable();
+    expect(host.value()).toEqual([]);
+    expect(document.activeElement).toBe(field());
+  });
+
+  it('keeps the draft when the focused chip is removed and the browser blurs it first', async () => {
+    const remove = Element.prototype.remove;
+    vi.spyOn(Element.prototype, 'remove').mockImplementation(function (this: Element) {
+      const active = document.activeElement;
+      if (active && this.contains(active)) {
+        active.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: null }));
+      }
+      remove.call(this);
+    });
+    field().value = 'draft';
+    field().dispatchEvent(new Event('input', { bubbles: true }));
+    chip('b').focus();
+    press(chip('b'), 'Delete');
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a', 'c']);
+    expect(field().value).toBe('draft');
+  });
+
+  it('keeps the draft when the window loses focus', async () => {
+    field().value = 'draft';
+    field().dispatchEvent(new Event('input', { bubbles: true }));
+    chip('b').focus();
+    vi.spyOn(document, 'hasFocus').mockReturnValue(false);
+    chip('b').dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: null }));
+    await fixture.whenStable();
+    expect(host.value()).toEqual(['a', 'b', 'c']);
+    expect(field().value).toBe('draft');
+  });
+
+  it('keeps focus in the field when a chip is removed programmatically', async () => {
+    chip('b').focus();
+    field().focus();
+    host.value.set(['a', 'c']);
+    await fixture.whenStable();
+    expect(document.activeElement).toBe(field());
+  });
+
+  it('clears the selection when the field gets focus', async () => {
+    host.selectable.set(true);
+    host.selected.set(['a']);
+    await fixture.whenStable();
+    field().focus();
+    await fixture.whenStable();
+    expect(host.selected()).toEqual([]);
+  });
+
+  it('a click on the background focuses the field', () => {
+    element().click();
+    expect(document.activeElement).toBe(field());
+  });
+});
+
+describe('ChipInputComponent on the server', () => {
+  it('renders no chip tab stop before its first refresh', () => {
+    const scope = globalThis as { ngServerMode?: boolean };
+    TestBed.configureTestingModule({ providers: [provideZonelessChangeDetection()] });
+    scope.ngServerMode = true;
+    try {
+      const fixture = TestBed.createComponent(KeyboardHostComponent);
+      fixture.detectChanges();
+      const stops = [...fixture.nativeElement.querySelectorAll('c-chip')].map((chip: Element) =>
+        chip.getAttribute('tabindex')
+      );
+      expect(stops).toEqual(['-1', '-1', '-1']);
+    } finally {
+      delete scope.ngServerMode;
+    }
+  });
+});
diff --git a/projects/coreui-angular/src/lib/chip-input/chip-input.module.ts b/projects/coreui-angular/src/lib/chip-input/chip-input.module.ts
new file mode 100644
index 00000000..7b914fbe
--- /dev/null
+++ b/projects/coreui-angular/src/lib/chip-input/chip-input.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { ChipInputComponent } from './chip-input.component';
+
+@NgModule({
+  imports: [ChipInputComponent],
+  exports: [ChipInputComponent]
+})
+export class ChipInputModule {}
diff --git a/projects/coreui-angular/src/lib/chip-input/chip-input.validators.spec.ts b/projects/coreui-angular/src/lib/chip-input/chip-input.validators.spec.ts
new file mode 100644
index 00000000..2e254780
--- /dev/null
+++ b/projects/coreui-angular/src/lib/chip-input/chip-input.validators.spec.ts
@@ -0,0 +1,138 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  input,
+  OnChanges,
+  provideZonelessChangeDetection,
+  signal
+} from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import {
+  AbstractControl,
+  AsyncValidator,
+  FormsModule,
+  NG_ASYNC_VALIDATORS,
+  NgModel,
+  ValidationErrors
+} from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { AnnouncerService } from '../services/announcer.service';
+import { ChipInputComponent } from './chip-input.component';
+
+@Component({
+  imports: [FormsModule, ChipInputComponent],
+  template: `
+    <c-chip-input minlength="2" [required]="required()" [(ngModel)]="tags" />
+    <button id="outside">Outside</button>
+  `
+})
+class TemplateValidatorsHostComponent {
+  tags: string[] = ['a', 'b'];
+  readonly required = signal(true);
+}
+
+@Directive({
+  selector: '[cTaken]',
+  providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: TakenValidatorDirective, multi: true }]
+})
+class TakenValidatorDirective implements AsyncValidator, OnChanges {
+  readonly cTaken = input('');
+  #onChange?: () => void;
+
+  ngOnChanges(): void {
+    this.#onChange?.();
+  }
+
+  registerOnValidatorChange(fn: () => void): void {
+    this.#onChange = fn;
+  }
+
+  validate(control: AbstractControl<string[]>): Promise<ValidationErrors | null> {
+    return Promise.resolve(control.value?.includes(this.cTaken()) ? { taken: true } : null);
+  }
+}
+
+@Component({
+  imports: [FormsModule, ChipInputComponent, TakenValidatorDirective],
+  template: `<c-chip-input [cTaken]="taken()" [(ngModel)]="tags" />`
+})
+class AsyncValidatorHostComponent {
+  tags = ['a'];
+  readonly taken = signal('a');
+}
+
+@Component({
+  imports: [FormsModule, ChipInputComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <form>
+      <c-chip-input name="tags" minlength="2" [(ngModel)]="tags" #model="ngModel" />
+      <button [disabled]="model.invalid">Save</button>
+    </form>
+  `
+})
+class FirstRenderHostComponent {
+  tags = ['a'];
+}
+
+describe('ChipInputComponent template validators', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ providers: [provideZonelessChangeDetection()] });
+    vi.spyOn(TestBed.inject(AnnouncerService), 'announce').mockReturnValue(vi.fn());
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('applies required and minlength written next to ngModel', async () => {
+    const fixture = TestBed.createComponent(TemplateValidatorsHostComponent);
+    document.body.append(fixture.nativeElement);
+    await fixture.whenStable();
+    const element = fixture.nativeElement.querySelector('c-chip-input') as HTMLElement;
+    const field = element.querySelector('input')!;
+    const control = fixture.debugElement.query(By.directive(NgModel)).injector.get(NgModel).control;
+    expect(control.errors).toBeNull();
+
+    element.querySelector<HTMLButtonElement>('c-chip button.chip-remove')!.click();
+    await fixture.whenStable();
+    expect(control.errors).toEqual({ minlength: { requiredLength: 2, actualLength: 1 } });
+
+    element.querySelector<HTMLButtonElement>('c-chip button.chip-remove')!.click();
+    field.dispatchEvent(
+      new FocusEvent('focusout', { bubbles: true, relatedTarget: fixture.nativeElement.querySelector('#outside') })
+    );
+    await fixture.whenStable();
+    expect(control.errors).toEqual({ required: true });
+    expect(element.classList.contains('is-invalid')).toBe(true);
+    expect(field.getAttribute('aria-invalid')).toBe('true');
+    expect(field.getAttribute('aria-required')).toBe('true');
+
+    fixture.componentInstance.required.set(false);
+    await fixture.whenStable();
+    expect(control.errors).toBeNull();
+    fixture.nativeElement.remove();
+  });
+
+  it('is invalid from the first render inside a form', async () => {
+    const fixture = TestBed.createComponent(FirstRenderHostComponent);
+    const model = fixture.debugElement.query(By.directive(NgModel)).injector.get(NgModel);
+    await fixture.whenStable();
+    expect(model.control.errors).toEqual({ minlength: { requiredLength: 2, actualLength: 1 } });
+    expect(fixture.nativeElement.querySelector('form > button').disabled).toBe(true);
+  });
+
+  it('applies an async validator written next to ngModel and follows its changes', async () => {
+    const fixture = TestBed.createComponent(AsyncValidatorHostComponent);
+    const model = fixture.debugElement.query(By.directive(NgModel)).injector.get(NgModel);
+    await fixture.whenStable();
+    await new Promise((resolve) => setTimeout(resolve));
+    expect(model.control.errors).toEqual({ taken: true });
+
+    fixture.componentInstance.taken.set('b');
+    await fixture.whenStable();
+    await new Promise((resolve) => setTimeout(resolve));
+    expect(model.control.errors).toBeNull();
+  });
+});
diff --git a/projects/coreui-angular/src/lib/chip-input/index.ts b/projects/coreui-angular/src/lib/chip-input/index.ts
new file mode 100644
index 00000000..4aaf8f92
--- /dev/null
+++ b/projects/coreui-angular/src/lib/chip-input/index.ts
@@ -0,0 +1 @@
+export * from './public_api';
diff --git a/projects/coreui-angular/src/lib/chip-input/public_api.ts b/projects/coreui-angular/src/lib/chip-input/public_api.ts
new file mode 100644
index 00000000..2a0fc2f2
--- /dev/null
+++ b/projects/coreui-angular/src/lib/chip-input/public_api.ts
@@ -0,0 +1,2 @@
+export { ChipInputComponent } from './chip-input.component';
+export { ChipInputModule } from './chip-input.module';
diff --git a/projects/coreui-angular/src/lib/chip-set/chip-set.component.ts b/projects/coreui-angular/src/lib/chip-set/chip-set.component.ts
index c5e9596d..a2b1dca4 100644
--- a/projects/coreui-angular/src/lib/chip-set/chip-set.component.ts
+++ b/projects/coreui-angular/src/lib/chip-set/chip-set.component.ts
@@ -14,7 +14,7 @@ import { ChipComponent } from '../chip/chip.component';
 import { ChipSetRef } from '../chip/chip-set-ref';
 import { optionalNumberAttribute } from '../chip/chip.utils';
 import { ChipSetService } from './chip-set.service';
-import { ChipItem, ChipSelectionMode } from './chip-set.types';
+import { ChipItem } from './chip-set.types';
 
 @Component({
   selector: 'c-chip-set',
@@ -133,7 +133,7 @@ export class ChipSetComponent {
    * @returns 'single' | 'multiple'
    * @default 'multiple'
    */
-  readonly selectionMode = input<ChipSelectionMode>('multiple');
+  readonly selectionMode = input<'single' | 'multiple'>('multiple');
 
   /**
    * Tab index of the set host. Without it the set takes `-1` only while it holds focus after its last chip is removed.
diff --git a/projects/coreui-angular/src/lib/chip-set/chip-set.service.ts b/projects/coreui-angular/src/lib/chip-set/chip-set.service.ts
index b5d6fc3c..0c248c93 100644
--- a/projects/coreui-angular/src/lib/chip-set/chip-set.service.ts
+++ b/projects/coreui-angular/src/lib/chip-set/chip-set.service.ts
@@ -27,6 +27,7 @@ export interface ChipSetHost {
   readonly filter: Signal<boolean>;
   readonly initialStop: 'first' | 'last';
   readonly isListbox: Signal<boolean>;
+  readonly readonly?: Signal<boolean>;
   readonly removable: Signal<boolean>;
   readonly removeIcon: Signal<TemplateRef<unknown> | undefined>;
   readonly selectable: Signal<boolean>;
@@ -60,6 +61,7 @@ export class ChipSetService extends ChipSetRef {
   readonly disabled = computed(() => this.#host()?.disabled() ?? false);
   readonly filter = computed(() => this.#host()?.filter() ?? false);
   readonly isListbox = computed(() => this.#host()?.isListbox() ?? false);
+  readonly readonly = computed(() => this.#host()?.readonly?.() ?? false);
   readonly removable = computed(() => this.#host()?.removable() ?? false);
   readonly removeIcon = computed(() => this.#host()?.removeIcon());
   readonly selectable = computed(() => this.#host()?.selectable() ?? false);
@@ -140,7 +142,7 @@ export class ChipSetService extends ChipSetRef {
       return null;
     }
     if (this.orderedItems().length === 0) {
-      return chip === this.#firstFocusable() ? 0 : -1;
+      return chip === this.#provisionalStop() ? 0 : -1;
     }
     if (!this.#ordered().has(chip)) {
       return null;
@@ -152,6 +154,17 @@ export class ChipSetService extends ChipSetRef {
     this.#host()?.removeRequested(chip.identity());
   }
 
+  focusLast(): boolean {
+    const chip = this.#lastFocusable();
+    chip?.focus();
+    return !!chip;
+  }
+
+  isLastFocusable(target: EventTarget | null): boolean {
+    const chip = this.#chipContaining(target);
+    return !!chip && chip === this.#lastFocusable();
+  }
+
   handleKeydown($event: KeyboardEvent): void {
     const host = this.#host();
     if (!host || !NAVIGATION_KEYS.includes($event.key)) {
@@ -171,15 +184,21 @@ export class ChipSetService extends ChipSetRef {
     const chip = this.#chipContaining($event.target);
     this.#focusedItem = chip;
     if (chip?.focusable() && this.#host()?.element.contains(chip.element)) {
-      [...this.#registry]
-        .filter((item) => item !== chip && item.element.getAttribute('tabindex') === '0')
-        .forEach((item) => item.element.setAttribute('tabindex', '-1'));
-      chip.element.setAttribute('tabindex', '0');
       this.activeItem.set(chip);
-      this.#keyManager.updateActiveItem(chip);
+      this.#moveStop(chip);
     }
   }
 
+  resync(): void {
+    this.#settled = false;
+    this.#scheduleRefresh();
+  }
+
+  resetStop(): void {
+    this.activeItem.set(null);
+    this.#moveStop(untracked(this.#stop));
+  }
+
   handleFocusout($event: FocusEvent): void {
     const chip = this.#focusedItem;
     if (!chip) {
@@ -340,15 +359,37 @@ export class ChipSetService extends ChipSetRef {
     return focusable.find((chip) => this.isSelected(chip.identity())) ?? focusable[0] ?? null;
   }
 
-  #firstFocusable(): ChipComponent | null {
+  #lastFocusable(): ChipComponent | null {
+    return (
+      this.#updateOrder()
+        .filter((chip) => chip.focusable())
+        .at(-1) ?? null
+    );
+  }
+
+  #provisionalStop(): ChipComponent | null {
+    const host = this.#host();
+    if (!host || host.initialStop === 'last') {
+      return null;
+    }
     for (const chip of this.#registry) {
-      if (chip.focusable()) {
+      if (chip.focusable() && host.element.contains(chip.element)) {
         return chip;
       }
     }
     return null;
   }
 
+  #moveStop(stop: ChipComponent | null): void {
+    [...this.#registry]
+      .filter((item) => item !== stop && item.element.getAttribute('tabindex') === '0')
+      .forEach((item) => item.element.setAttribute('tabindex', '-1'));
+    if (stop) {
+      stop.element.setAttribute('tabindex', '0');
+      this.#keyManager.updateActiveItem(stop);
+    }
+  }
+
   #chipContaining(target: EventTarget | null): ChipComponent | null {
     if (!(target instanceof Node)) {
       return null;
diff --git a/projects/coreui-angular/src/lib/chip/chip-set-ref.ts b/projects/coreui-angular/src/lib/chip/chip-set-ref.ts
index 9858c0ec..c14cbfc4 100644
--- a/projects/coreui-angular/src/lib/chip/chip-set-ref.ts
+++ b/projects/coreui-angular/src/lib/chip/chip-set-ref.ts
@@ -6,6 +6,7 @@ export abstract class ChipSetRef {
   abstract readonly disabled: Signal<boolean>;
   abstract readonly filter: Signal<boolean>;
   abstract readonly isListbox: Signal<boolean>;
+  abstract readonly readonly: Signal<boolean>;
   abstract readonly removable: Signal<boolean>;
   abstract readonly removeIcon: Signal<TemplateRef<unknown> | undefined>;
   abstract readonly selectable: Signal<boolean>;
diff --git a/projects/coreui-angular/src/lib/chip/chip.component.ts b/projects/coreui-angular/src/lib/chip/chip.component.ts
index 73103b7c..22536451 100644
--- a/projects/coreui-angular/src/lib/chip/chip.component.ts
+++ b/projects/coreui-angular/src/lib/chip/chip.component.ts
@@ -19,7 +19,7 @@ import {
 import { Colors } from '../coreui.types';
 import { UIDService } from '../services/uid.service';
 import { ChipSetRef } from './chip-set-ref';
-import { ChipSize, ChipVariant } from './chip.types';
+import { ChipVariant } from './chip.types';
 import { getChipText, optionalBooleanAttribute, optionalNumberAttribute } from './chip.utils';
 
 @Component({
@@ -143,7 +143,7 @@ export class ChipComponent implements FocusableOption, OnInit {
    * @returns 'sm' | 'lg' | undefined
    * @default undefined
    */
-  readonly size = input<ChipSize>();
+  readonly size = input<'sm' | 'lg'>();
 
   /**
    * Tab index of a standalone chip. Inside a chip set it is ignored: the set keeps one tab stop for all its chips.
@@ -215,7 +215,9 @@ export class ChipComponent implements FocusableOption, OnInit {
     this.roleAttr() === 'button' && this.isSelectable() ? String(this.isSelected()) : null
   );
 
-  readonly ariaDisabled = computed(() => (this.roleAttr() && this.isDisabled() ? 'true' : null));
+  readonly isLocked = computed(() => this.isSelectable() && !!this.#set?.readonly());
+
+  readonly ariaDisabled = computed(() => (this.roleAttr() && (this.isDisabled() || this.isLocked()) ? 'true' : null));
 
   readonly hasRemoveButton = computed(() => this.isRemovable() && !this.isDisabled() && this.roleAttr() !== 'option');
 
@@ -251,7 +253,7 @@ export class ChipComponent implements FocusableOption, OnInit {
       disabled: this.isDisabled(),
       [`chip-${color}`]: !!color,
       [`chip-${size}`]: !!size,
-      'chip-clickable': this.clickable() || this.isSelectable(),
+      'chip-clickable': (this.clickable() || this.isSelectable()) && !this.isLocked(),
       'chip-outline': this.variant() === 'outline'
     } as Record<string, boolean>;
   });
@@ -345,6 +347,9 @@ export class ChipComponent implements FocusableOption, OnInit {
   }
 
   #toggle(): void {
+    if (this.isLocked()) {
+      return;
+    }
     const next = !this.isSelected();
     this.#selected.set(next);
     this.selectedChange.emit(next);
diff --git a/projects/coreui-angular/src/public-api.ts b/projects/coreui-angular/src/public-api.ts
index b06235bd..4e0261d8 100644
--- a/projects/coreui-angular/src/public-api.ts
+++ b/projects/coreui-angular/src/public-api.ts
@@ -16,6 +16,7 @@ export * from './lib/callout';
 export * from './lib/card';
 export * from './lib/carousel';
 export * from './lib/chip';
+export * from './lib/chip-input';
 export * from './lib/chip-set';
 export * from './lib/collapse';
 export * from './lib/dropdown';