Forms

Tags Input

Type and commit free-form tags as removable chips.

Import

tsx

import { TagsInput } from "@cooud-ui/ui";

bash

npx cooud-ui add tags-input

Examples

Default

Type free-form tags and commit each with Enter or comma; they render as removable chips. Backspace on an empty field deletes the last tag, and `max` caps the total.

Topics

designreact

Press Enter or comma to add. Backspace removes the last tag.

tsx

function TagsInputDemo() {
  const [tags, setTags] = useState<string[]>(["design", "react"]);
  const labelId = useId();

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <FieldLabel id={labelId}>Topics</FieldLabel>
      <TagsInput
        value={tags}
        onValueChange={setTags}
        aria-labelledby={labelId}
        max={6}
        placeholder="Add a topic…"
      />
      <FieldDescription>
        Press Enter or comma to add. Backspace removes the last tag.
      </FieldDescription>
    </div>
  );
}

API Reference

Generated from the component's exported types.

TagsInputProps

Prop	Type	Default	Description
`value`	`string[]`	—	Controlled list of committed tags. Pair with `onValueChange`.
`defaultValue`	`string[]`	—	Initial tags for uncontrolled usage.
`onValueChange`	`(tags: string[]) => void`	—	Called with the next list of tags whenever a tag is added or removed.
`placeholder`	`string`	—	Placeholder shown in the text field when it is empty.
`max`	`number`	—	Maximum number of tags. Once reached, further additions are ignored.
`disabled`	`boolean`	`false`	Disables typing and tag removal.
`allowDuplicates`	`boolean`	`false`	When true, the same tag may be added more than once. Defaults to false.
`delimiter`	`string \| string[]`	`DEFAULT_DELIMITERS`	Characters that commit the current input as a tag, in addition to Enter. Defaults to a comma, so both Enter and "," commit.
`validate`	`(tag: string) => boolean`	—	Reject a tag when this returns false. Receives the trimmed candidate.
`aria-invalid`	`boolean \| "true" \| "false"`	—	Marks the field as invalid, applying error styling.
`id`	`string`	—	Native id for the text input (for an external `<label htmlFor>`).
`aria-label`	`string`	—	Accessible name for the text input when there is no visible label.
`aria-labelledby`	`string`	—	id of an element that labels the text input.
`name`	`string`	—	Native name for the text input.
`className`	`string`	—	Extra classes for the field wrapper.
`inputClassName`	`string`	—	Extra classes for the inner text input.