Skip to content

Conversation

@mdo
Copy link
Member

@mdo mdo commented Jan 12, 2026

This adds a new .chip and .chip-input component. The individual chips are derivative of badges, but not a 1:1 match. Chips are built to utilize theme classes, has specific styles for each state (default, selected), and comes with some automatic behavior vs JS for the chips input (which wraps the chips and a ghost input).

  • Type and Enter to add a new chip in a chip input
  • Backspace from input selects previous chip, backspace again deletes it and focuses on next nearest chip
  • Clicking a chip in a chip input focuses that chip
  • Chips use subtle/text theme keys first, and for selected use bg/contrast
  • Chips can include text, images, icons, and dismiss button

An open question I have is, do these usurp badges entirely? Should badges turn into little adornments absolutely positioned on an element only? Or like inline counts?

CleanShot 2026-01-11 at 20 00 28@2x CleanShot 2026-01-11 at 20 00 35@2x CleanShot 2026-01-11 at 20 00 46@2x

@mdo mdo added the js label Jan 12, 2026
@mdo mdo requested a review from a team as a code owner January 12, 2026 04:03
@mdo mdo added the css label Jan 12, 2026
@mdo mdo requested a review from a team as a code owner January 12, 2026 04:03
@mdo mdo added the v6 label Jan 12, 2026
@mdo mdo added this to v6.0.0 Jan 12, 2026
@github-project-automation github-project-automation bot moved this to Inbox in v6.0.0 Jan 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

2 participants