Repository navigation
feat(ChipInput): add Chip Input form control - #290
Merged
Merged
Conversation
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'.
xidedix
added a commit
that referenced
this pull request
Oct 10, 2026
- feat(chip): add `c-chip` and `c-chip-set` (#288) - feat(chip-input): add `c-chip-input` (#290) - fix(theme.directive): `colorScheme="light"` kept on first render (#287) - fix(rtl.service): read the computed direction, so an LTR island on an RTL page is LTR (#289) - chore(dependencies): update to Angular 22.2.2, `@types/node` to 26.6.5 Verified: `npm ci`, lint, tests 60 + 781 + 30, 3 prod builds.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds
c-chip-input, a form control that turns typed or pasted text into chips. It binds through[(value)],ngModel,formControlNameand[formField], keeps one tab stop for the chips next to the field, and announces added and removed chips.Validators written next to
ngModel(sync and async) are attached to the control by the component, because the custom-control path in@angular/forms22 never callssetUpValidators(Angular issue 70721).c-chipsizeandc-chip-setselectionModenow spell out their values in the input types, so the API tables show'sm' | 'lg'and'single' | 'multiple'.