Skip to content

feat(combobox): add chips#2051

Open
maxffarrell wants to merge 7 commits into
huntabyte:mainfrom
maxffarrell:feat/combobox-multiple-tags
Open

feat(combobox): add chips#2051
maxffarrell wants to merge 7 commits into
huntabyte:mainfrom
maxffarrell:feat/combobox-multiple-tags

Conversation

@maxffarrell
Copy link
Copy Markdown
Contributor

@maxffarrell maxffarrell commented May 14, 2026

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

  • Adds Combobox.Chips, Combobox.Chip, and Combobox.ChipRemoveButton components for rendering selected values as removable chips in a type="multiple" combobox
  • Adds clearInputOnSelect and removeOnBackspace props to Combobox.Input for chip-friendly UX (clear input after selection, backspace to remove last chip)
  • Makes inputValue bindable in combobox.svelte so internal updates propagate out via bind:inputValue
  • Adds full docs with a live demo and API reference entries for all new components and props
  • All existing combobox tests pass with no breaking changes

New API

<Combobox.Root type="multiple" bind:value bind:inputValue {items}>
  <Combobox.Chips>
    {#each value as chipValue (chipValue)}
      <Combobox.Chip value={chipValue}>
        {#snippet children({ label })}
          <span>{label}</span>
          <Combobox.ChipRemoveButton>✕</Combobox.ChipRemoveButton>
        {/snippet}
      </Combobox.Chip>
    {/each}
    <Combobox.Input clearInputOnSelect removeOnBackspace />
  </Combobox.Chips>
  <Combobox.Portal>
    <Combobox.Content>
      {#each filteredItems as item}
        <Combobox.Item value={item.value} label={item.label} />
      {/each}
    </Combobox.Content>
  </Combobox.Portal>
</Combobox.Root>

🤖 Generated with Claude Code

maxffarrell and others added 3 commits May 13, 2026 22:03
…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>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 14, 2026

⚠️ No Changeset found

Latest commit: 1e99f65

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@maxffarrell maxffarrell changed the title feat(combobox): add Chips/Chip/ChipRemoveButton components for multiple chip pattern feat(combobox): add chips May 14, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 14, 2026

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
bits-ui ✅ Ready (View Log) Visit Preview 1e99f65

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>
maxffarrell and others added 2 commits May 13, 2026 23:01
…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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant