Token Field

import { TokenField, TokenFieldInput, TokenFieldToken } from "@hashti/react";

// Convenience component with automatic label and description
<TokenField
  label="AI Prompt Templates & Tags"
  placeholder="Type a prompt or insert {{token}}..."
/>

// Or compound composition
<TokenField.Root>
  <TokenField.Label>Prompt Variables</TokenField.Label>
  <TokenField.Input placeholder="Add token...">
    {(segment) => (
      <TokenField.Token>
        {segment.text}
      </TokenField.Token>
    )}
  </TokenField.Input>
  <TokenField.Description>Press Enter or comma to create a token.</TokenField.Description>
</TokenField.Root>

import { useState } from "react";
import { TokenField } from "@hashti/react";

export function AIPromptTokenFieldDemo() {
  const [value, setValue] = useState("");

  return (
    <div className="max-w-md space-y-3">
      <TokenField
        label="System Prompt Template"
        placeholder="e.g. Translate the following text into {{target_language}}..."
        description="Insert variable tokens enclosed in double braces."
        value={value}
        onChange={setValue}
        multiline
        size="md"
      />
      <div className="flex gap-2">
        <button
          type="button"
          onClick={() => setValue((prev) => prev + " {{user_query}} ")}
          className="text-xs bg-gray-100 dark:bg-gray-800 px-2.5 py-1 rounded-md hover:bg-gray-200"
        >
          + Insert user_query
        </button>
        <button
          type="button"
          onClick={() => setValue((prev) => prev + " {{temperature}} ")}
          className="text-xs bg-gray-100 dark:bg-gray-800 px-2.5 py-1 rounded-md hover:bg-gray-200"
        >
          + Insert temperature
        </button>
      </div>
    </div>
  );
}

import { TokenField } from "@hashti/react";

export function ValidatedTokenFieldDemo() {
  return (
    <div className="max-w-md space-y-4">
      <TokenField
        label="Required Architectural Attributes"
        placeholder="Enter attributes..."
        isInvalid
        errorMessage="At least one architectural threshold attribute must be specified."
        multiline
      />
    </div>
  );
}