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)}
    />
  );
}

安装

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

用法

使用 value 配合 onValueChange 控制标签；非受控用法则使用 defaultValue。

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

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

示例

不限值

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"
    />
  );
}

最大数量

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"
    />
  );
}

本地化

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"
    />
  );
}

行为

按 Enter、逗号或 Tab 即可创建标签。失焦时也会提交当前值。粘贴以逗号或换行分隔的文本时，会同步创建每个值。重复值会被忽略。

本地化

通过 labels 可以翻译 TagInput 生成的所有文本：回退输入名称、标签移除操作、无效值提示和达到最大数量提示。

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

API 参考

Prop	Type	Default	Description
alt	`string`	-	-
autoComplete	`React.HTMLInputAutoCompleteAttribute`	-	-
checked	`boolean`	-	-
height	`number \| string`	-	-
list	`string`	-	-
name	`string`	-	-
placeholder	`string`	-	-
readOnly	`boolean`	-	-
required	`boolean`	-	-
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`	-	-