Token

import { useState } from "react";
import { GlToken } from "gitlab-ui-react/token";

const initialTokens = ["documentation", "accessibility", "react"];

export default function TokenExample() {
  const [tokens, setTokens] = useState(initialTokens);

  return (
    <div className="flex flex-wrap gap-3">
      {tokens.map((token) => (
        <GlToken
          key={token}
          removeLabel={`Remove ${token}`}
          onRemove={() => setTokens((current) => current.filter((item) => item !== token))}>
          {token}
        </GlToken>
      ))}
    </div>
  );
}

import { GlToken } from "gitlab-ui-react/token";

export default function TokenVariantsExample() {
  return (
    <div className="flex flex-wrap gap-3">
      <GlToken>Default</GlToken>
      <GlToken variant="search-type">Author</GlToken>
      <GlToken variant="search-value">Norcleeh</GlToken>
      <GlToken viewOnly>View only</GlToken>
    </div>
  );
}

import { useState } from "react";
import { GlFormField, GlFormFieldLabel } from "gitlab-ui-react/form-field";
import {
  GlTokenSelector,
  type GlTokenSelectorItem,
} from "gitlab-ui-react/token-selector";

const availableItems: GlTokenSelectorItem[] = [
  { id: "norcleeh", name: "Norcleeh" },
  { id: "nriothrreion", name: "NriotHrreion" },
  { id: "nocpiun", name: "Nocpiun" },
];

export default function TokenSelectorExample() {
  const [query, setQuery] = useState("");
  const [value, setValue] = useState<GlTokenSelectorItem[]>([availableItems[0]]);
  const items = availableItems.filter((item) => (
    item.name?.toLocaleLowerCase().includes(query.toLocaleLowerCase())
  ));

  return (
    <GlFormField className="max-w-lg">
      <GlFormFieldLabel htmlFor="reviewers">Reviewers</GlFormFieldLabel>
      <GlTokenSelector
        allowClearAll
        id="reviewers"
        items={items}
        onInputValueChange={setQuery}
        onValueChange={setValue}
        placeholder="Search users"
        value={value} />
    </GlFormField>
  );
}

import { GlFormField, GlFormFieldLabel } from "gitlab-ui-react/form-field";
import { GlTokenSelector } from "gitlab-ui-react/token-selector";

export default function TokenSelectorCustomExample() {
  return (
    <GlFormField className="max-w-lg">
      <GlFormFieldLabel htmlFor="custom-topics">Custom topics</GlFormFieldLabel>
      <GlTokenSelector
        allowUserDefinedTokens
        id="custom-topics"
        items={[]}
        placeholder="Enter a topic"
        renderToken={(item) => <span>{item.name}</span>}
        renderUserDefinedToken={(inputValue) => <span>Add “{inputValue}”</span>} />
    </GlFormField>
  );
}