TagsInput
Several short values in one field, shown as removable chips. Use it for topics, labels, skills or email recipients, with or without a list of suggestions.
Installation
Set up Camaleo once (Installation), then import it. Put it in a Field so the label names the input.
import { TagsInput, Field, FieldLabel, FieldDescription } from "@camaleo/react";Anatomy
Chips and a text input share one box. Each chip has its own remove button, and suggestions open in a popup below.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Press Enter after each topic.
Pick from a list
Type "py". Without allowCustom only suggestions can be added, so every profile uses the same names and search finds them.
Suggestions and new tags
Type a label that isn't listed and press Enter. emptyText tells people that Enter creates it, so they don't wait for a match.
3 / 5 skills
Limit and duplicates
Add "React" again, or a sixth skill. A repeated tag stays in the input without calling onValueChange, so catch it in onKeyDown; refuse the limit in onValueChange and say why in FieldError.
Paste a list: commas, semicolons and line breaks split it.
Paste a list
Paste "joao@acme.com, lia@acme.com". An onPaste handler splits on commas and line breaks, so a column copied from a spreadsheet becomes one chip per address.
Backspace removes the last topic; ← moves to a topic, Delete removes it.
Remove with the keyboard
Focus the input and press Backspace, or ← and Delete. Each remove button is named after its tag through removeLabel, in the page's language.
In a form
Click save. With name, every tag is submitted as its own value, so formData.getAll("labels") returns the list.
Locked while the quarterly audit runs, until 15 Nov.
Disabled, with a reason
disabled locks the chips and the input. Say in the description why and until when, or people will think it's broken.
In context
Tags live next to other fields. These are whole pieces of UI you can copy, in the skin you picked.
Article settings
Up to 5. Readers can follow tags.
Guidelines
Suggest the tags that exist, so filters and reports count them together.
People type the same tag three ways, and a filter for "bug" misses two of them.
Short tags fit in a row and scan at a glance.
They fill the row, nobody can filter by them, and they belong in a comment.
Props
onValueChange is not called.Other <input> attributes like placeholder, type, onKeyDown and onPaste go to the inline input.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the field itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- The input has role="combobox"; inside a Field, FieldLabel names it, and the description and error are read with it.
- Each chip's remove button needs a name: removeLabel builds it from the tag, like "Remove finance". Translate it.
- When you refuse a tag (duplicate, limit, invalid email), show the reason as text in FieldError; a silent refusal looks like a broken key.
- The popup is portalled but keeps the skin through PortalScope, and contrast passes WCAG 2.2 AA in all 13 skins.