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

Selectable:

Removable:

Usage

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

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

const TagGroup = () => {
  const [selected, setSelected] = useState(new Set(['react']));

  return (
    <NTagGroup
      items={items}
      selectionMode="multiple"
      selectedKeys={selected}
      onSelectionChange={setSelected}
    />
  );
};

export default TagGroup;

Attributes

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.
isDisabled	boolean	false	Disables the tag group.
className	string	' '	Additional CSS classes.