add: Tags Input component - #686
Conversation
|
Kobalte already has a fitting component: https://kobalte.dev/docs/core/components/combobox#multiple-selection PR seems to also include a fix, do you want to cherry pick for this PR or submit another one? |
…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>
Yep, I separate the fix into 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:
I'd prefer option 2 but it's your decision :) |
|
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. |
|
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 I guess the biggest addition here is a new 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. |
TagsInputcomponent (@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.addOnPaste),max/maxLength/duplicate-prevention/customvalidate, 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).createListState,createDomCollection,createSelectableItem,createControllableSignal) rather than introducing new state-management patterns.create-dom-collectionprimitive (ownedWrite: trueon its internal signal) needed for Solid 2.0 compatibility when dynamically removing collection items — this is also used byToggleGroup/Tabs/Accordion/Rating/Slider, and the full core test suite was re-run to confirm no regressions there.docs/core/components/tags-input.mdx(Import/Features/Anatomy/Example/Usage/API Reference/Rendered Elements) plus live examples, and a nav entry.