#421
Creatable tags
A multi-select Combobox that offers a Create row for text that matches no tag, and adds the new tag to its options.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Creatable tags" pattern (@codeatlasdev/ui demo #421, inputs/combobox) in my app.
Call get_demo({ ids: ["#421"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Free-form tagging where users pick existing tags or invent new ones inline.
Keep these library parts, with the props and tokens the demo uses:
- Combobox from "@codeatlasdev/ui"
Behaviour to keep:
- `multiple`, `creatable`, `label="Tags"`, `{options}`, `bind:value={tags}` and `oncreate={onCreate}` on one `Combobox`
- `options` starts with `design`, `backend`, `urgent` and `onCreate` appends the new value
- `let tags = $state<string[]>([])` starts empty
- `placeholder="Add tags"` and `searchPlaceholder="Search or create a tag"`
- Wrapper `.col` has `max-width: 360px`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Combobox
@codeatlasdev/ui
How it is built
- `multiple`, `creatable`, `label="Tags"`, `{options}`, `bind:value={tags}` and `oncreate={onCreate}` on one `Combobox`
- `options` starts with `design`, `backend`, `urgent` and `onCreate` appends the new value
- `let tags = $state<string[]>([])` starts empty
- `placeholder="Add tags"` and `searchPlaceholder="Search or create a tag"`
- Wrapper `.col` has `max-width: 360px`
Related
Loading source.