Tags Input

Lista de chips con campo de texto para añadir etiquetas (Enter) y quitarlas en línea

Tags input basado en Ark UI Tags Input. El <TagsInput /> de conveniencia muestra etiqueta, chips con botón de quitar y campo de texto. Usa defaultValue o value / onValueChange en la raíz para valores iniciales o controlados.

Etiquetas

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

export default function Example() {
  return <TagsInput label="Etiquetas" placeholder="Escribe y pulsa Enter..." />;
}

View Code

Instalación

bash

liminal add tags-input

Uso

Se añade una etiqueta escribiendo y pulsando Enter (comportamiento de Ark). label y placeholder son opcionales. Reenvía props de la raíz como defaultValue={["react"]} o value / onValueChange para uso controlado.

Frameworks

React

TypeScript

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

export default function Example() {
  return (
    <TagsInput
      label="Frameworks"
      placeholder="Añade una etiqueta..."
      defaultValue={["React", "TypeScript"]}
    />
  );
}

View Code

Ejemplos

API compuesta

Exportaciones: TagsInputRoot, TagsInputLabel, TagsInputControl, TagsInputItem, TagsInputItemText, TagsInputInput, TagsInputDeleteTrigger, TagsInputHiddenInput, TagsInputClearTrigger. El componente de conveniencia usa TagsInput.Context para mapear etiquetas a ítems; copia ese patrón o compón el tuyo.

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>Etiquetas</TagsInputLabel>
      <ArkTagsInput.Context>
        {(api) => (
          <TagsInputControl>
            {api.value.map((value, index) => (
              <TagsInputItem key={`${value}-${index}`} value={value} index={index}>
                <TagsInputItemText>{value}</TagsInputItemText>
                <TagsInputDeleteTrigger aria-label={`Quitar ${value}`} />
              </TagsInputItem>
            ))}
            <TagsInputInput placeholder="Añadir..." />
          </TagsInputControl>
        )}
      </ArkTagsInput.Context>
      <TagsInputHiddenInput />
    </TagsInputRoot>
  );
}

API

Prop	Type	Default	Description
label	string	-	Etiqueta opcional sobre el control.
placeholder	string	"Add tag..."	Placeholder del input inline.

También acepta las props de TagsInput.Root de Ark (defaultValue, value, onValueChange, max, disabled, etc.). Ver Ark Tags Input.