TkxTag

import { TkxTag } from 'tekivex-ui';

Basic

Default tags

reacttypescriptwcagopen-source

<TkxTag>react</TkxTag>
<TkxTag>typescript</TkxTag>
<TkxTag>wcag</TkxTag>

Variants

Variants

defaultprimarysuccesswarningdangerinfo

<TkxTag variant="default">default</TkxTag>
<TkxTag variant="primary">primary</TkxTag>
<TkxTag variant="success">success</TkxTag>
<TkxTag variant="warning">warning</TkxTag>
<TkxTag variant="danger">danger</TkxTag>
<TkxTag variant="info">info</TkxTag>

Sizes

Sizes

smmdlg

<TkxTag size="sm" variant="primary">sm</TkxTag>
<TkxTag size="md" variant="primary">md</TkxTag>
<TkxTag size="lg" variant="primary">lg</TkxTag>

Closable

Closable — click × to remove

reacttypescripttekivex-uiwcag

With icon

<TkxTag icon={<CheckIcon />} variant="success">verified</TkxTag>

Closable

const [tags, setTags] = useState(['react', 'typescript', 'tekivex-ui']);

{tags.map((t) => (
  <TkxTag
    key={t}
    closable
    onClose={() => setTags((xs) => xs.filter((x) => x !== t))}
  >
    {t}
  </TkxTag>
))}

The close button has localised aria-label from the active locale (e.g. “Close” / “بند کریں”).

Tag input — multi-tag editor

import { TkxTagInput } from 'tekivex-ui';

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

<TkxTagInput
  label="Topics"
  tags={tags}
  onChange={setTags}
  placeholder="Add topic and press Enter"
  suggestions={['react', 'typescript', 'a11y', 'i18n']}
/>

Press Enter or Comma to commit a tag, Backspace in an empty input to remove the last tag. Suggestions auto-complete as the user types.

RSC compatible

TkxTag (without close button) uses no hooks — safe for Next.js Server Components. TkxTagInput is interactive and requires 'use client'.

Accessibility

• Tags render as <span> by default (decorative). Tags with closable render the inner pill as <span> and the close button as <button>
• Close button has localised aria-label
• TkxTagInput field has full label/hint/error wiring
• Tag chips inside the input are keyboard-removable via Backspace

Props

TkxTag

Prop	Type	Required	Description
variant	string		One of the 6 named variants.
size	'sm' | 'md' | 'lg'		Defaults to md.
closable	boolean		Render close button.
onClose	() => void		Required when closable.
icon	ReactNode		Leading icon.

TkxTagInput

Prop	Type	Required	Description
tags	string[]	yes	Controlled tag list.
onChange	(tags: string[]) => void	yes	List change.
suggestions	string[]		Optional autocomplete.
maxTags	number		Soft cap.
allowDuplicates	boolean		Defaults to false.

Source

src/components/TkxTag.tsx