Tags

Composant flexible pour afficher des étiquettes (labels, filtres, membres) avec support de sélection, avatars, compteurs et actions.

Exemple de base

Design

Marketing

Development

Sales

<Tags
  label="Catégories"
  size="md"
  items={[
    { id: "1", label: "Design" },
    { id: "2", label: "Marketing" },
    { id: "3", label: "Development" },
    { id: "4", label: "Sales" }
  ]}
/>

Tailles

Le composant Tags supporte trois tailles : sm, md, lg

Small :

Design

Marketing

Development

Medium :

Design

Marketing

Development

Large :

Design

Marketing

Development

<Tags label="Small" size="sm" items={[...]} />
<Tags label="Medium" size="md" items={[...]} />
<Tags label="Large" size="lg" items={[...]} />

Contenu visuel & compteur

Les tags peuvent afficher des avatars, des points de statut et des badges de compteur.

John Doe

Jane Smith

Active

Marketing24

<Tags
  label="Tags visuels"
  size="md"
  items={[
    { id: "1", label: "John Doe", avatarSrc: "/avatars/john.jpg" },
    { id: "2", label: "Jane Smith", avatarSrc: "/avatars/jane.jpg" },
    { id: "3", label: "Active", dot: true },
    { id: "4", label: "Marketing", count: 24 }
  ]}
/>

Bouton de fermeture

Le bouton de fermeture apparaît lorsque onClose ou allowsRemoving est défini.

Design

Marketing

Development

const [tags, setTags] = useState([
  { id: "1", label: "Design" },
  { id: "2", label: "Marketing" },
  { id: "3", label: "Development" }
]);

const handleRemove = (id: string) => {
  setTags(prev => prev.filter(tag => tag.id !== id));
};

<Tags
  label="Tags amovibles"
  size="md"
  items={tags.map(tag => ({
    ...tag,
    onClose: handleRemove
  }))}
/>

Sélection multiple (contrôlée)

Mode: multiple - IDs sélectionnés: 1, 3

const [selected, setSelected] = useState(new Set(["1", "3"]));

<Tags
  label="Catégories"
  size="md"
  selectionMode="multiple"
  selectedIds={selected}
  onSelectionChange={setSelected}
  items={[
    { id: "1", label: "Design" },
    { id: "2", label: "Marketing" },
    { id: "3", label: "Development" },
    { id: "4", label: "Sales" }
  ]}
/>

Sélection unique (contrôlée)

Mode: single - ID sélectionné: 2

const [selected, setSelected] = useState(new Set(["2"]));

<Tags
  label="Options"
  size="md"
  selectionMode="single"
  selectedIds={selected}
  onSelectionChange={setSelected}
  disallowEmptySelection // Empêche la désélection
  items={[
    { id: "1", label: "Option 1" },
    { id: "2", label: "Option 2" },
    { id: "3", label: "Option 3" }
  ]}
/>

Mode non contrôlé

Le composant peut gérer son propre état sans selectedIds/onSelectionChange.

// Pas besoin de useState pour la sélection
<Tags
  label="Sélection non contrôlée"
  size="md"
  selectionMode="multiple"
  items={[
    { id: "1", label: "Design" },
    { id: "2", label: "Marketing" },
    { id: "3", label: "Development" }
  ]}
/>

États désactivés

Actif

Désactivé

Actif

<Tags
  label="Catégories"
  size="md"
  items={[
    { id: "1", label: "Actif" },
    { id: "2", label: "Désactivé", isDisabled: true },
    { id: "3", label: "Actif" }
  ]}
/>

Utilisation avancée (TagsCustom)

Utilisez les composants individuels exportés via TagsCustom pour une composition sur mesure.

import { TagsCustom } from "@/components/ui/tags";
const { Group, List, Tag } = TagsCustom;

<Group label="Catégories" size="md" selectionMode="multiple">
  <List className="gap-4">
    <Tag id="1" count={5}>Design</Tag>
    <Tag id="2" avatarSrc="/avatar.jpg">John Doe</Tag>
    <Tag id="3" dot onClose={(id) => console.log(id)}>
      Actif
    </Tag>
  </List>
</Group>

API Reference

Props	Type	Default	Description
label	string	-	Label accessible pour le groupe de tags
items	TagItem[]	-	Tableau d'objets définissant les tags
size?	"sm" \| "md" \| "lg"	"sm"	Taille des tags
selectionMode?	"none" \| "single" \| "multiple"	"none"	Mode de sélection des tags
selectedIds?	Set<string>	-	IDs des tags sélectionnés (mode contrôlé)
onSelectionChange?	(ids: Set<string>) => void	-	Callback appelé lors du changement de sélection
disallowEmptySelection?	boolean	false	Empêche la désélection du dernier élément
listClassName?	string	-	Classes CSS pour la liste de tags

TagItem

Props	Type	Default	Description
id	string	-	Identifiant unique du tag
label	React.ReactNode	-	Contenu principal du tag
avatarSrc?	string	-	URL de l'avatar à afficher
avatarContrastBorder?	boolean	false	Bordure de contraste pour l'avatar
dot?	boolean	false	Affiche un point de statut
dotClassName?	string	-	Classes CSS pour le point
count?	number	-	Badge de compteur
isDisabled?	boolean	false	Désactive l'interaction
onClose?	(id: string) => void	-	Callback appelé lors de la fermeture
allowsRemoving?	boolean	false	Affiche le bouton de fermeture sans callback

Navigation au clavier

Le composant est entièrement navigable et interactif via le clavier, conformément aux standards ARIA.

Touche	Action
Tab	Déplace le focus vers le prochain tag
Shift + Tab	Déplace le focus vers le tag précédent
Flèche droite	Navigue vers le tag suivant (circulaire)
Flèche gauche	Navigue vers le tag précédent (circulaire)
Enter / Espace	Sélectionne/désélectionne le tag (en mode sélection)
Delete / Backspace	Ferme le tag si `onClose` est défini