Description
The limel-chip component already supports an invalid prop that visualises
a chip in an error state (red background with a chessboard pattern, white text).
However, when chips are rendered via limel-chip-set, consumers can only mark
the chip-set as a whole as invalid — there is no way to flag specific entries
in the value array as invalid.
Motivation
A common use case is an input chip-set of free-form values (such as email
addresses or tags) where some individual entries may fail validation while
others are valid. Today, consumers have to either:
- show a single container-level error (useless when most entries are valid), or
- swap the chip icon and hope that communicates the problem.
Neither gives a proper per-chip visual error state, even though limel-chip
itself already supports it.
Proposed solution
Add an optional invalid field to the Chip interface and forward it through
limel-chip-set to the rendered limel-chip, so consumers can flag
individual chips as invalid via the value array:
value = [
{ id: 1, text: 'alice@example.com' },
{ id: 2, text: 'not-an-email', invalid: true, icon: 'error' },
{ id: 3, text: 'bob@example.com' },
];
This is independent of the existing chip-set-level invalid prop, which
continues to mark the whole field as invalid.
Description
The
limel-chipcomponent already supports aninvalidprop that visualisesa chip in an error state (red background with a chessboard pattern, white text).
However, when chips are rendered via
limel-chip-set, consumers can only markthe chip-set as a whole as invalid — there is no way to flag specific entries
in the
valuearray as invalid.Motivation
A common use case is an input chip-set of free-form values (such as email
addresses or tags) where some individual entries may fail validation while
others are valid. Today, consumers have to either:
Neither gives a proper per-chip visual error state, even though
limel-chipitself already supports it.
Proposed solution
Add an optional
invalidfield to theChipinterface and forward it throughlimel-chip-setto the renderedlimel-chip, so consumers can flagindividual chips as invalid via the
valuearray:This is independent of the existing chip-set-level
invalidprop, whichcontinues to mark the whole field as invalid.