feat(combobox): add chips#2051
Open
maxffarrell wants to merge 7 commits into
Open
Conversation
…chip pattern Adds three new Combobox components for the chip/tag display pattern when using type="multiple": Tags (container), Tag (individual chip with label snippet props), and TagRemoveButton (removes the chip's value on click). Also adds clearInputOnSelect and removeOnBackspace props to Combobox.Input, and makes inputValue $bindable on Combobox.Root so bind:inputValue stays in sync when bits-ui internally clears the field after selection. Includes 19 new browser tests covering the full chip interaction surface. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Documents the new multiple-select chip pattern with a live demo, structure examples, and API reference entries for Tags, Tag, TagRemoveButton, clearInputOnSelect, and removeOnBackspace. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…pRemoveButton Renames all tag-related identifiers to chip throughout: component files, state classes, TypeScript types, data attributes, exports, tests, and docs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Contributor
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
Fix unused variable in chip test and apply formatter to chip test fixture and types. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace plain multiple combobox demo with chip-pattern demo showing Chips/Chip/ChipRemoveButton components - Remove the separate chips example (combobox-demo-chips.svelte) - Remove the ComponentPreview block from the "Multiple Selection with Chips" section (kept the structure/code docs) - Fix portal positioning: bind Chips container ref and pass as customAnchor so content width and vertical anchor stay stable as chips wrap - Simplify Input: drop redundant oninput handler since SelectInputState already updates root.opts.inputValue and bind:inputValue propagates it out Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ps wrap min-w-[80px] caused the input to jump to a new row whenever chips filled all but 80px of the container, even when the chips themselves hadn't wrapped. min-w-0 lets the input shrink onto the same row as chips until a real wrap occurs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ntil chips wrap" This reverts commit f67776c.
1 task
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
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.
Summary
I referenced the base ui implementation for this since according to shadcn docs, base ui component is used even when project is set to radix
Combobox.Chips,Combobox.Chip, andCombobox.ChipRemoveButtoncomponents for rendering selected values as removable chips in atype="multiple"comboboxclearInputOnSelectandremoveOnBackspaceprops toCombobox.Inputfor chip-friendly UX (clear input after selection, backspace to remove last chip)inputValuebindable incombobox.svelteso internal updates propagate out viabind:inputValueNew API
🤖 Generated with Claude Code