Tag input
A tag field where the words you type become the tags: press comma or Enter and the chip forms around the text right where you typed it, with existing tags suggested as you go.
dinnervegetarianspicyfamily
Comma or Enter adds a tag4 of 6 tags
Things to try
- Type a word and press comma. The chip forms around the word without it moving.
- Pick a suggestion. It flies up into the field. A new word is offered as “Create”.
- Press Backspace in an empty field. The last tag comes off.
Install
npx shadcn@latest add https://your-docs-site/r/tag-input.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- Built on Base UI.
Comboboxinmultiplemode gives the chips, the suggestions, keyboard navigation and removal. - The text becomes the chip. A new chip starts with no padding, no tint and no dot, exactly where the typed text sat, then all three grow in with Motion.
- Every tag keeps its colour. Known tags have one; a new tag gets one from its letters, so it's the same every time. The chip is a soft tint of it, and fills with it when you arrow back onto it to remove it.
- Picked tags fly in. Each suggestion is the tag's dot and word. Pick one and the word lifts out of its row and flies up into the field as a chip; its remove button grows in once it lands. Added tags leave the list, and come back when removed.
- A limit you can see. The counter under the field rolls as tags come and go, and turns amber at six, when the field stops taking more.
The suggested tags and their colours are examples. Pass your own.
Phone input
A phone number field that formats as you type: each digit rises into place, the country's spaces and brackets appear as the number reaches them, and changing country regroups the same digits with the separators sliding to their new places.
Quantity stepper
An add-to-cart button that becomes a quantity stepper: the count rolls up and down, and at one the minus becomes a bin, so the next press folds it back into Add.