Tag Group

Name: Nayan UI
Author: Nayan UI

A Tag Group component is a UI element that displays a collection of tags or labels, allowing users to select, filter, or remove tags. It supports multiple selection modes and removable tags, making it ideal for categorization, filtering, and labeling interfaces.

Demo

Rendered live, with the same build of the library you install.

Selectable:

Removable:

Usage

Source

TagGroup.tsx

import { useState } from 'react';
import { NTagGroup } from '@nayan-ui/react';

const items = [
  { id: 'react', label: 'React' },
  { id: 'vue', label: 'Vue' },
  { id: 'angular', label: 'Angular' },
  { id: 'svelte', label: 'Svelte' },
  { id: 'solid', label: 'SolidJS' }
];

const TagGroup = () => {
  const [selected, setSelected] = useState<any>(new Set(['react']));
  const [removableItems, setRemovableItems] = useState(items);

  const handleRemove = (keys: Set<string>) => {
    setRemovableItems(prev => prev.filter(item => !keys.has(item.id)));
  };

  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Selectable:</h3>
      <div className="mb-5">
        <NTagGroup items={items} selectionMode="multiple" selectedKeys={selected} onSelectionChange={setSelected} />
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Removable:</h3>
      <div className="mb-5">
        <NTagGroup items={removableItems} onRemove={handleRemove} />
      </div>
    </div>
  );
};

export default TagGroup;

Attributes

10 props

Name	Type	Default	Details
items	NTagItem[]	Required	List of tag items with id and label.
selectionMode	'none' \| 'single' \| 'multiple'	'none'	Selection mode.
selectedKeys	Iterable<string>	Optional	Selected tag keys.
onSelectionChange	(keys: Selection) => void	Optional	Callback when selection changes.
onRemove	(keys: Set<string>) => void	Optional	Callback when tags are removed.
size	'sm' \| 'md' \| 'lg'	'md'	Tag size.
variant	'default' \| 'surface'	'default'	Tag variant.
disabled	boolean	false	Disables the tag group.
className	string	' '	Additional CSS classes.
tagClassName	string	' '	Custom class for individual tags.