Skip to content

add: Tags Input component - #686

Open
davedbase wants to merge 6 commits into
solid2from
v2/tags-inputs
Open

add: Tags Input component#686
davedbase wants to merge 6 commits into
solid2from
v2/tags-inputs

Conversation

@davedbase

Copy link
Copy Markdown
  • Adds a new TagsInput component (@kobalte/core/tags-input) modeled on Ark UI's Tags Input, following Kobalte's existing anatomy/form-control conventions: Root, Label, Control, Input, Item, ItemPreview, ItemText, ItemInput, ItemDeleteTrigger, ClearTrigger, Description, ErrorMessage, HiddenInput.
  • Supports add-on-Enter, delimiter-based auto-split while typing, paste-splitting (addOnPaste), max/maxLength/duplicate-prevention/custom validate, in-place tag editing (double-click or focus+Enter, Escape to cancel), full arrow-key roving-tabindex navigation between tags and the input, and complete form-control integration (validationState, required, disabled, readOnly, name, native form submission via one hidden input per tag).
  • Reuses existing Kobalte primitives (createListState, createDomCollection, createSelectableItem, createControllableSignal) rather than introducing new state-management patterns.
  • Fixes a latent bug in the shared create-dom-collection primitive (ownedWrite: true on its internal signal) needed for Solid 2.0 compatibility when dynamically removing collection items — this is also used by ToggleGroup/Tabs/Accordion/Rating/Slider, and the full core test suite was re-run to confirm no regressions there.
  • Adds full documentation: docs/core/components/tags-input.mdx (Import/Features/Anatomy/Example/Usage/API Reference/Rendered Elements) plus live examples, and a nav entry.

@jer3m01

jer3m01 commented Jul 17, 2026

Copy link
Copy Markdown
Member

Kobalte already has a fitting component: https://kobalte.dev/docs/core/components/combobox#multiple-selection
Tag auto creation and editing can be built on top (would be trivial once the new composable system is implemented).

PR seems to also include a fix, do you want to cherry pick for this PR or submit another one?

@davedbase davedbase moved this from Backlog to In progress in Kobalte - Solid 2 Jul 17, 2026
@davedbase davedbase moved this from In progress to Ready in Kobalte - Solid 2 Jul 17, 2026
davedbase and others added 2 commits July 17, 2026 09:02
…ng items

registerItem's cleanup unregisters an item by writing to the items
signal from inside Solid's disposal phase when a <For>-rendered item
is removed, which Solid 2.0 rejects without `ownedWrite: true`.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@davedbase

davedbase commented Jul 17, 2026

Copy link
Copy Markdown
Author

Kobalte already has a fitting component: https://kobalte.dev/docs/core/components/combobox#multiple-selection Tag auto creation and editing can be built on top (would be trivial once the new composable system is implemented).

PR seems to also include a fix, do you want to cherry pick for this PR or submit another one?

Yep, I separate the fix into patch/create-dom-collection so you can merge it separately. My concern about using ComboBox is that it forces a pre-selection, there's no open format tag creation. It's pretty different and not really the same.

I think it's safe to have to variations: ComboBox should be used for suggestions and managing the list. Tags Input is more open format and serves a different need.

So there's two reasonable paths forward:

  1. Remove the multiple suggestion option from ComboxBox and consolidate it in TagsList
  2. Document Tags List for this dynamic tag creation pattern and point to ComboBox for the the suggestion pattern.

I'd prefer option 2 but it's your decision :)

@jer3m01

jer3m01 commented Jul 18, 2026

Copy link
Copy Markdown
Member

Pre-selection can be disabled, should also be possible with minor adjustments to not render the list under the input field. Have seen someone implement open tag creation on it already.

We should make Kobalte lighter and composable rather than many specific implementations.

Could have it as a pre configured combobox for this behavior however.

@davedbase

Copy link
Copy Markdown
Author

Yep, absolutely agree on that point.

I'm trying to consolidate the composition structure but keep hitting walls. The one major difference is the aria stuff.

So with the latest approach I tried to solve it not by basing everything off of ComboBox because there's a lot of gotchas that go along with that. I don't think the solution here is to just make it work, it's more about aligning both components to align with each other a bit better.

I guess the biggest addition here is a new createRovingCollection concept that Claude came up with which I can only assumed it borrowed from some other UI implementation. It's not a bad concept and I ran with it. Basically it guts the internal primitives of both and replaces it with a more appropriate internal utility.

Not sure if you're in favour of this but it works well in practice. Both primitives remain opinionated in their own right while sharing common internals.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Ready

Development

Successfully merging this pull request may close these issues.

2 participants