Skip to content

chip-set: expose invalid state per chip #4026

@TommyLindh2

Description

@TommyLindh2

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions