Etiquetas.

<fieldset class="ui-sample ui-form ui-tag-input" data-tag-input><legend>Etiquetas</legend><ul><li><span>datos</span><button type="button" data-tag-remove aria-label="Quitar datos">×</button></li></ul><label for="tag-input-0">Agregar etiqueta</label><input class="input" id="tag-input-0" placeholder="Escribe una etiqueta"><small>Presiona Enter para agregar.</small></fieldset>

<fieldset class="ui-sample ui-form ui-tag-input border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-tag-input><legend>Etiquetas</legend><ul class="grid gap-2"><li><span>datos</span><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" data-tag-remove aria-label="Quitar datos">×</button></li></ul><label for="tag-input-0">Agregar etiqueta</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="tag-input-0" placeholder="Escribe una etiqueta"><small class="text-sm text-slate-600">Presiona Enter para agregar.</small></fieldset>

import type { ChangeEventHandler, KeyboardEventHandler } from "react";

export interface TagInputTag {
  /** Texto de la etiqueta. */
  label: string;
}

export interface TagInputProps {
  /** Título del grupo. */
  legend?: string;
  /** Etiquetas ya agregadas. */
  tags?: TagInputTag[];
  /** Verbo del botón que quita una etiqueta; el nombre accesible es `${removeLabel} ${tag.label}`. */
  removeLabel?: string;
  /** Se llama al pulsar la equis de una etiqueta. */
  onRemove?: (tag: TagInputTag, index: number) => void;
  /** Etiqueta visible del campo para agregar. */
  label?: string;
  /** Id del campo para agregar. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  placeholder?: string;
  /** Texto inicial de un campo no controlado. */
  defaultValue?: string;
  /** Texto de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Para agregar la etiqueta al presionar Enter. */
  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
  /** Texto de ayuda bajo el campo. */
  help?: string;
  className?: string;
}

/**
 * Campo para agregar y quitar etiquetas de texto libre, con las etiquetas actuales sobre el campo; se usa para clasificar un registro con palabras que no salen de una lista cerrada.
 *
 * Quien lo usa mantiene la lista: agrega en `onKeyDown` (Enter) y quita en `onRemove`.
 *
 * @example <TagInput id="etiquetas" tags={[{ label: "datos" }, { label: "salud" }]} onRemove={quitar} onKeyDown={agregarConEnter} />
 */
export function TagInput({
  legend = "Etiquetas",
  tags = [{ label: "datos" }],
  removeLabel = "Quitar",
  onRemove,
  label = "Agregar etiqueta",
  id = "tag-input-0",
  name,
  placeholder = "Escribe una etiqueta",
  defaultValue,
  value,
  onChange,
  onKeyDown,
  help = "Presiona Enter para agregar.",
  className,
}: TagInputProps) {
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <fieldset className={["ui-form ui-tag-input", className].filter(Boolean).join(" ")} data-tag-input>
      {legend ? <legend>{legend}</legend> : null}
      {tags.length ? (
        <ul>
          {tags.map((tag, i) => (
            <li key={`${i}-${tag.label}`}>
              <span>{tag.label}</span>
              <button type="button" data-tag-remove aria-label={`${removeLabel} ${tag.label}`} onClick={onRemove ? () => onRemove(tag, i) : undefined}>×</button>
            </li>
          ))}
        </ul>
      ) : null}
      <label htmlFor={id}>{label}</label>
      <input
        className="input"
        id={id}
        name={name}
        placeholder={placeholder}
        onKeyDown={onKeyDown}
        {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue })}
      />
      {help ? <small>{help}</small> : null}
    </fieldset>
  );
}