Autocomplete
Checkbox Multiselect
Multiple choice as a list rather than chips: what you picked stays in place, and the list does not close after every tick.
What you can change
- the options array and the initial defaultValue
- the label, placeholder, emptyLabel and clearLabel captions
- the counter wording via countText with {count} and {total}
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/autocomplete-014?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
The component is self-contained: one file, no dependencies, its own palette in the local --vibeui-autocomplete-014-* variables. The selection is kept as an array of strings and the list order never changes — picks do not float to the top, so the eye does not lose its place. A row is a real label with an input[type=checkbox]: keyboard, state and the screen-reader announcement come from the browser rather than being imitated with roles. The whole row is the target rather than the tick itself: a 15px box is next to impossible to hit with a finger. The cursor is driven by the arrows and toggled by Enter — space is taken by typing in the search field. The selection counter is marked role="status", so the change is read aloud. The footer layout is computed from the panel's own width through a container query. The theme comes from color-scheme through light-dark(), and the component switches on a class-based dark theme for itself.
Tags
- autocomplete
- multiselect
- checkbox
- filter
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…