Tag Input - Kumo

Recipients

ava@cloudflare.com

Paste comma- or newline-separated email addresses.

import { useState } from "react";
import { TagInput } from "@cloudflare/kumo";

export function TagInputDemo() {
  const [recipients, setRecipients] = useState(["ava@cloudflare.com"]);
  return (
    <TagInput
      label="Recipients"
      description="Paste comma- or newline-separated email addresses."
      placeholder="name@example.com"
      autoComplete="off"
      value={recipients}
      onValueChange={setRecipients}
      validateValue={(value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)}
    />
  );
}

Installation

import { TagInput } from "@cloudflare/kumo";

Usage

Use value with onValueChange to control the tags. Use defaultValue for uncontrolled usage.

const [tags, setTags] = useState<string[]>([]);

<TagInput
  label="Labels"
  value={tags}
  onValueChange={setTags}
  placeholder="Add a label"
/>

Examples

Unrestricted values

Labels

frontendpriority

Accepts any non-empty value.

import { TagInput } from "@cloudflare/kumo";

export function TagInputUnrestrictedDemo() {
  return (
    <TagInput
      defaultValue={["frontend", "priority"]}
      label="Labels"
      description="Accepts any non-empty value."
      placeholder="Add a label"
    />
  );
}

Maximum values

Access groups

alpha

A maximum of three groups.

import { TagInput } from "@cloudflare/kumo";

export function TagInputLimitedDemo() {
  return (
    <TagInput
      defaultValue={["alpha"]}
      label="Access groups"
      maxValues={3}
      description="A maximum of three groups."
      placeholder="Type a group name"
    />
  );
}

Set name to submit each tag as a separate form value, so FormData.getAll(name) returns the tags. Text still in the input becomes a tag when focus leaves it, so clicking a submit button includes it. required passes once there’s at least one tag.

import { useState } from "react";
import { Button, TagInput } from "@cloudflare/kumo";

/** Each tag is submitted as its own form value, and `required` follows the tags. */
export function TagInputFormDemo() {
  const [submitted, setSubmitted] = useState<string[] | null>(null);

  return (
    <form
      className="flex w-full max-w-md flex-col gap-3"
      onSubmit={(event) => {
        event.preventDefault();
        const data = new FormData(event.currentTarget);
        setSubmitted(data.getAll("topics").map(String));
      }}
    >
      <TagInput
        name="topics"
        required
        label="Topics"
        description="Add at least one topic, then submit."
        placeholder="Add a topic"
      />
      <div className="flex items-center gap-3">
        <Button type="submit" variant="primary">
          Submit
        </Button>
        {submitted ? (
          <code className="text-sm text-kumo-subtle">
            topics: {JSON.stringify(submitted)}
          </code>
        ) : null}
      </div>
    </form>
  );
}

Read-only

readOnly shows the tags and keeps the input focusable, but tags can’t be added or removed. Like a native read-only input, it’s skipped by form validation, even when required is set.

Assigned teams

billingdnsworkers

Managed by your organization's administrator.

import { TagInput } from "@cloudflare/kumo";

export function TagInputReadOnlyDemo() {
  return (
    <TagInput
      readOnly
      defaultValue={["billing", "dns", "workers"]}
      label="Assigned teams"
      description="Managed by your organization's administrator."
    />
  );
}

Localization

Etiquetas

uno

import { TagInput } from "@cloudflare/kumo";

export function TagInputLocalizationDemo() {
  return (
    <TagInput
      defaultValue={["uno"]}
      label="Etiquetas"
      labels={{
        input: "Agregar etiqueta",
        removeValue: (value) => `Eliminar ${value}`,
        invalidValue: (value) => `${value} no es valido.`,
        maxValuesReached: (maxValues) => `Maximo de ${maxValues} etiquetas.`,
      }}
      maxValues={3}
      placeholder="Agregar una etiqueta"
    />
  );
}

Behavior

Press Enter, comma, or Tab to create a tag. Blur also commits the current value. Pasting comma- or newline-separated text inserts it into the current text at the cursor, then creates each value synchronously. Pasting text without a separator works like a normal paste. Duplicate values are ignored.

Localization

Use labels to translate all TagInput-generated text: the fallback input name, tag removal action, invalid-value feedback, and maximum-value feedback.

<TagInput
  label="Etiquetas"
  labels={{
    input: "Agregar etiqueta",
    removeValue: (value) => `Eliminar ${value}`,
    invalidValue: (value) => `${value} no es valido.`,
    maxValuesReached: (maxValues) => `Maximo de ${maxValues} etiquetas.`,
  }}
/>

API Reference

Prop	Type	Default	Description
alt	`string`	-	-
autoComplete	`React.HTMLInputAutoCompleteAttribute`	-	-
checked	`boolean`	-	-
height	`number \| string`	-	-
list	`string`	-	-
name	`string`	-	Submits each accepted tag as a separate form value under this name.
placeholder	`string`	-	-
readOnly	`boolean`	-	Prevents adding or removing tags while keeping the input focusable.
required	`boolean`	-	Requires at least one accepted tag for native form validation. Like a native input, a `readOnly` TagInput is skipped by validation.
type	`React.HTMLInputTypeAttribute`	-	-
width	`number \| string`	-	-
className	`string`	-	-
id	`string`	-	-
lang	`string`	-	-
title	`string`	-	-
children	`ReactNode`	-	-
value	`string[]`	-	-
validateValue	`object`	-	-
maxValues	`number`	-	-
labels	`TagInputLabels`	-	Translated labels for generated input, action, and validation text.
label	`ReactNode`	-	-
labelTooltip	`ReactNode`	-	-
description	`ReactNode`	-	-
error	`string \| object`	-	-
variant	`"default" \| "error"`	`"default"`	-
disabled	`boolean`	-	-