Tags Input

Chip list with a text field to add tags (Enter) and remove tags inline

A tags input built on Ark UI Tags Input. The convenience <TagsInput /> renders a label, chips with remove buttons, and a text field. Use defaultValue or controlled value / onValueChange on the root for initial or managed tags.

Installation

bash

liminal add tags-input

Usage

Users add a tag by typing and pressing Enter (behavior comes from Ark). Optional label and placeholder apply to the field. Pass through Ark root props such as defaultValue={["react"]} or value / onValueChange for controlled usage.

Frameworks

React

TypeScript

import { TagsInput } from "@/components/ui/tags-input";

export default function Example() {
  return (
    <TagsInput
      label="Frameworks"
      placeholder="Add a tag..."
      defaultValue={["React", "TypeScript"]}
    />
  );
}

View Code

Examples

Compound API

Exports include TagsInputRoot, TagsInputLabel, TagsInputControl, TagsInputItem, TagsInputItemText, TagsInputInput, TagsInputDeleteTrigger, TagsInputHiddenInput, and TagsInputClearTrigger. The convenience component uses TagsInput.Context to map tags to items—copy that pattern or compose your own.

tsx

import { TagsInput as ArkTagsInput } from "@ark-ui/react/tags-input";
import {
  TagsInputRoot,
  TagsInputLabel,
  TagsInputControl,
  TagsInputItem,
  TagsInputItemText,
  TagsInputInput,
  TagsInputDeleteTrigger,
  TagsInputHiddenInput,
} from "@/components/ui/tags-input";

export default function Example() {
  return (
    <TagsInputRoot defaultValue={["alpha"]}>
      <TagsInputLabel>Tags</TagsInputLabel>
      <ArkTagsInput.Context>
        {(api) => (
          <TagsInputControl>
            {api.value.map((value, index) => (
              <TagsInputItem key={`${value}-${index}`} value={value} index={index}>
                <TagsInputItemText>{value}</TagsInputItemText>
                <TagsInputDeleteTrigger aria-label={`Remove ${value}`} />
              </TagsInputItem>
            ))}
            <TagsInputInput placeholder="Add..." />
          </TagsInputControl>
        )}
      </ArkTagsInput.Context>
      <TagsInputHiddenInput />
    </TagsInputRoot>
  );
}

API

Prop	Type	Default	Description
label	string	-	Optional label above the control.
placeholder	string	"Add tag..."	Placeholder for the inline text input.

Also accepts Ark TagsInput.Root props (defaultValue, value, onValueChange, max, disabled, etc.). See Ark Tags Input.