# @synerise/ds-tagslist
> TagsList UI Component for the Synerise Design System
Latest version **0.11.10** (published 2025-01-21) · ISC license · 0 weekly downloads
## Install
```sh
npm install @synerise/ds-tagslist
pnpm add @synerise/ds-tagslist
yarn add @synerise/ds-tagslist
bun add @synerise/ds-tagslist
```
## Health
**Score 50/100 (C)** — status: stable.
Positive: has types; no vulnerabilities; high maintenance score; high quality score.
Warnings: low downloads; no esm support; pre 1.0.
Negative: stale.
## Facts
| | |
|---|---|
| Version | 0.11.10 |
| Published | 2025-01-21 |
| First published | 2021-02-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 18 |
| Unpacked size | 147.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 96 |
| Maintainers | synerise |
## Links
- npm: https://www.npmjs.com/package/@synerise/ds-tagslist
- Repository: https://github.com/Synerise/synerise-design
- Homepage: https://github.com/Synerise/synerise-design#readme
- Issues: https://github.com/Synerise/synerise-design/issues
- npm.io page: https://npm.io/package/@synerise/ds-tagslist
## Dependencies (18)
- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [invariant](https://npm.io/package/invariant.md) 2.2.4
- [@synerise/ds-icon](https://npm.io/package/@synerise/ds-icon.md) ^0.70.0
- [@synerise/ds-input](https://npm.io/package/@synerise/ds-input.md) ^0.24.21
- [@synerise/ds-utils](https://npm.io/package/@synerise/ds-utils.md) ^0.31.2
- [@synerise/ds-button](https://npm.io/package/@synerise/ds-button.md) ^0.22.3
- [@synerise/ds-loader](https://npm.io/package/@synerise/ds-loader.md) ^0.3.22
- [@synerise/ds-result](https://npm.io/package/@synerise/ds-result.md) ^0.7.20
- [@synerise/ds-search](https://npm.io/package/@synerise/ds-search.md) ^0.9.25
- [@synerise/ds-tooltip](https://npm.io/package/@synerise/ds-tooltip.md) ^0.14.55
- [@synerise/ds-checkbox](https://npm.io/package/@synerise/ds-checkbox.md) ^0.12.23
- [@synerise/ds-dropdown](https://npm.io/package/@synerise/ds-dropdown.md) ^0.18.31
- [react-highlight-words](https://npm.io/package/react-highlight-words.md) ^0.17.0
- [@synerise/ds-list-item](https://npm.io/package/@synerise/ds-list-item.md) ^0.6.3
- [@synerise/ds-scrollbar](https://npm.io/package/@synerise/ds-scrollbar.md) ^0.11.24
- [@synerise/ds-search-bar](https://npm.io/package/@synerise/ds-search-bar.md) ^0.7.9
- [@synerise/ds-typography](https://npm.io/package/@synerise/ds-typography.md) ^0.16.12
- [@synerise/ds-checkbox-tristate](https://npm.io/package/@synerise/ds-checkbox-tristate.md) ^0.2.91
## Recent versions
- 0.11.10 (latest) — 2025-01-21
- 0.11.9 — 2025-01-15
- 0.11.8 — 2024-12-16
- 0.11.7 — 2024-12-13
- 0.11.6 — 2024-12-04
- 0.11.5 — 2024-11-29
- 0.11.4 — 2024-11-28
- 0.11.3 — 2024-11-21
- 0.11.2 — 2024-11-14
- 0.11.1 — 2024-11-12
- 0.11.0 — 2024-11-12
- 0.10.17 — 2024-10-29
- 0.10.16 — 2024-10-28
- 0.10.15 — 2024-10-23
- 0.10.14 — 2024-10-14
- … 192 more at https://npm.io/package/@synerise/ds-tagslist/versions
## README
---
id: tagslist
title: TagsList
---
TagsList UI Component
## Installation
```bash
npm i @synerise/ds-tagslist
# or
yarn add @synerise/ds-tagslist
```
## Usage
```tsx
import TagsList from '@synerise/ds-tagslist'
const items = [
{ id: 1, name: 'Tag 1' },
{ id: 2, name: 'Tag 2' }
];
const onChange = (
action: TagsListActions,
newItems: TagsListItem[],
newTargetItem: TagsListItem,
originItems: TagsListItem[],
originTargetItem: TagsListItem
) => {
console.log(
action, // action string that was triggered
newItems, // new items object with changed data
newTargetItem: // new item object with changed data
originItems, // basically previous items
originTargetItem, // previous item
);
};
```
## Demo
## API
| Property | Description | Type | Default |
|-------------------|---------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|---------|
| addButtonDisabled | Defines if add button is disabled | boolean | `false` |
| items | Array of items which should be displayed as tags for controlled state | TagsListItem[] | |
| onChange | Event function triggered when items change | (action: TagsListActions, newItems: TagsListItem[], newTargetItem: TagsListItem, originItems: TagsListItem[], originTargetItem: TagsListItem) => void | |
| defaultItems | Array of items for no controlled state | TagsListItem[] | |
| maxItemsVisible | The maximum amount of items which will be visible on the initial render | number | 10 |
| showMoreStep | Number of items shown after clicking "show more" button | number | 10 |
| texts | Override translation texts passed to the component | TagsListTexts | - |
| onAddDropdown | Event function triggered on "Add tag" visibility change | (visible: boolean) => void | |
| onSearch | Event function triggered on search input change | (query: string) => void | |
| onManageTags | Triggered when Manage tags buttons are clicked | (event: React.MouseEvent) => void | |
| onItemsAdd | Event triggered when "Apply" button is clicked inside "Add tag" dropdown. | (items: TagsListItem[]) => void | |
| withCheckbox | Show checkboxes on items hover | boolean | `true` |
### TagsListItem
`TagsListItem` object contains information about specific tag.
| Property | Description | Type | Default |
|------------------|---------------------------------------------------------|---------|---------|
| name | Name of the tag | string | - |
| description | Description info, if set it will be shown in AddModal | string | - |
| favourite | Whether item is added to favourites | boolean | `false` |
| checked | Whether item is checked/selected (for controlled state) | boolean | `false` |
| canUpdate | Whether item is editable | boolean | `false` |
| canDelete | Whether item is removable | boolean | `false` |
| canEnterSettings | Whether user can enter settings for the item | boolean | `false` |
| id | Unique id of the tag item | string | - |
### TagsListTexts
| Property | Description | Type | Default |
|----------------------|--------------------------------------------------------------------------------------------|-----------|---------|
| add | "Add" text | ReactNode | - |
| addItemLabel | A label of the add form | ReactNode | - |
| addToFavourite | A tooltip used for adding to the favourites | ReactNode | - |
| delete | "Delete" text | ReactNode | - |
| deleteFromFavourites | A tooltip used for removing from favourites | ReactNode | - |
| deleteAllContent | A message displayed when user wants to delete all the content of the folder | ReactNode | - |
| edit | "Edit" text - displayed in actions menu | ReactNode | - |
| enterSettings | "Settings" text - displayed in actions menu | ReactNode | - |
| invalidNameError | Error displayed when user provides invalid folder name | ReactNode | - |
| less | "Less" text - displayed in the footer | ReactNode | - |
| more | "More" text - displayed in the footer | ReactNode | - |
| moveToDefault | A message displayed when user wants to all the content of the folder to the default folder | ReactNode | - |
| moveToOtherFolder | A message displayed when user wants to all the content of the folder to the other folder | ReactNode | - |
| showLessLabel | Additional label of the "show less" button in the footer | ReactNode | - |
| showMoreLabel | Additional label of the "show more" button in the footer | ReactNode | - |
### AddModal
| Property | Description | Type | Default |
|-----------------|-----------------------------------------------------------|------------------------------------------------------------|---------|
| disabled | Should the trigger be disabled | boolean | `false` |
| items | List of items | TagsListItem[] | |
| loading | Show loading | boolean | `false` |
| tristate | Use `` for tags | boolean | `false` |
| trigger | Replace default trigger button | ReactNode | |
| searchAddTag | Ability to add new tags with search input | boolean | `true` |
| texts | Override translation texts passed to the component | TagsListTexts | |
| onItemsAdd | Event function triggered when hit Apply button | (items: TagsListItem[]) => void | |
| onVisibleChange | Event function triggered when dropdown visibility changes | (visible: boolean) => void | |
| onManageTags | Function triggered when "Manage tags" button is clicked | (event: React.MouseEvent) => void | |
---
_Source: https://npm.io/package/@synerise/ds-tagslist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._