TagInput Component
React tag input with Enter/comma commit, Backspace removal, duplicate filtering, max-tag limits, validation hook and error states — built with Tailwind CSS.
Import
1import { TagInput } from "@neuctra/ui";Basic Usage
Enter or comma commits a tag; Backspace on an empty field removes the last one.
Validation
Reject entries before they are added with validate.
Only valid email addresses are accepted
Sizes & Error
At least 3 tags are required
Props
All available props for the TagInput component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string[] | [] | Controlled / uncontrolled tag list |
| onChange | (tags: string[]) => void | — | Fired with the full next list |
| label | string | — | Label above the field |
| placeholder | string | "Add a tag…" | Inline input placeholder |
| maxTags | number | — | Hard limit; shows a live counter |
| validate | (tag: string) => boolean | — | Return false to reject a tag |
| addOnBlur | boolean | true | Commit the pending text on blur |
| error / helperText | string | — | Feedback line under the field |
| size | "sm" | "md" | "lg" | "md" | Field and chip scale |
| disabled | boolean | false | Lock the field |
| wrapperClassName | string | — | Styles the outermost wrapper. |
| labelClassName | string | — | Styles the field label. |
| chipClassName | string | — | Styles each tag chip wrapper. |
| chipRemoveClassName | string | — | Styles the remove ("x") button inside a chip. |
| inputClassName | string | — | Styles the inline text input. |
| helperClassName | string | — | Styles the helper text / error message. |
| countClassName | string | — | Styles the tag count indicator (e.g. "2/5"). |
Accessibility
- Every chip's remove button has an explicit aria-label ("Remove {tag}").
- The whole surface is click-to-focus; focus-within paints the ring on the container.
- Errors are announced via role=alert and linked with aria-describedby.
Frequently Asked Questions
How do I install and import the TagInput component?
Install the @neuctra/ui package, then import it with: import { TagInput } from "@neuctra/ui";
What variants and sizes does TagInput support?
TagInput supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the TagInput component accessible?
TagInput is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.