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';